Overview

This Button component documentation serves as a visual reference and demonstration of different button styles and configurations available for use in your application. It aims to provide inspiration and guidance in selecting and implementing buttons that align with your design requirements and user experience goals.

This page has multiple button styles and interactive button samples along with their Code snippets which you can include in your projects. The code snippets are available in TypeScript as well as JavaScript.

Headless Button

This is the button component with no inherent styles, so to render this component user will have to provide styles to the component.

This Button provides the feature of adding busy state, busy text which will be shown in busy state, ability to add button Prefix and button Suffix.

It uses following tailwind classes for providing styles: ** w-1/2 bg-red-400 hover:bg-red-500 py-2 rounded-lg text-white font-bold **

import React from "react";
import { HeadlessButton } from "@locoworks/reusejs-react-button";

const HeadlessSample = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<HeadlessButton
				className="w-1/2 bg-red-400 hover:bg-red-500 py-2 rounded-lg text-white font-bold"
				onClick={() => {
					console.log("Headless button Clicked!!");
				}}
			>
				Click here
			</HeadlessButton>
		</div>
	);
};

export default HeadlessSample;

Sample Code Demo

This is the sample styles included when you return ReuseButton as shown in the demo code. It has the features of setting the busy state and the busy text which will be visible when in busy state.

import React, { useState } from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const Sample = () => {
	const [busy, setBusy] = useState(false);

	const handleClick = () => {
		setBusy(true);
		setTimeout(() => {
			setBusy(false);
		}, 1500);
	};

	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseButton
				className="cursor-pointer w-28"
				busy={busy}
				onClick={() => {
					handleClick();
				}}
			>
				Reuse!
			</ReuseButton>
		</div>
	);
};

export default Sample;

Outline Button Demo

This is a simple ReuseButton with the styling of border-2 border-blue-600 bg-transparent font-bold text-blue-600 py-1 px-2 to give it a transparent button look with outlines. It can be suitable for situations where a more subdued visual appearance is desired while still maintaining the interactive nature of a button.

import React from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const OutlineButton = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseButton
				className="border-2 border-blue-600 hover:bg-blue-400 bg-transparent font-bold text-blue-600 py-2 px-4"
				onClick={() => {
					console.log("Hello");
				}}
			>
				Clicky!
			</ReuseButton>
			<ReuseButton
				className="border-2 border-red-600 hover:bg-red-400 bg-transparent font-bold text-red-600 py-2 px-4"
				onClick={() => {
					console.log("Hello");
				}}
			>
				Clicky!
			</ReuseButton>
		</div>
	);
};

export default OutlineButton;

Success Sample Button Demo

The Success Sample Button is a customizable button that provides feedback to the user by showing a loading state for a specified duration and then disabling the button and displaying a success state.

import React, { useState } from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";
import CheckIcon from "./icons/CheckIcon";

const SuccessSample = () => {
	const [busy, setBusy] = useState(false);
	const [text, setText] = useState("Register");

	const handleClick = () => {
		setBusy(true);
		setTimeout(() => {
			setText("Success");
			setBusy(false);
		}, 1500);
	};

	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseButton
				className={
					"cursor-pointer w-1/2" +
					(text === "Success"
						? " bg-green-500 gap-x-2 hover:bg-green-500 cursor-default"
						: "")
				}
				busy={busy}
				disabled={text === "Success" ? true : false}
				onClick={() => {
					handleClick();
				}}
				buttonPrefix={text === "Success" ? <CheckIcon /> : <></>}
			>
				{text}
			</ReuseButton>
		</div>
	);
};

export default SuccessSample;

Text Button Demo

This is a simple button with no visible outlines to make it look minimalistic. It can be used to embed hyperlinks within your text to make it standout.

import React from "react";
import { HeadlessButton } from "@locoworks/reusejs-react-button";

const TextButton = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<HeadlessButton
				className="w-fit py-2 rounded-lg text-red-500 hover:underline font-bold"
				onClick={() => {
					console.log("Headless button Clicked!!");
				}}
			>
				Click here
			</HeadlessButton>
		</div>
	);
};

export default TextButton;

CSSStyledButton

This code snippet of the button will give you a customizable button with CSS Styling. We have declared a styles object having CSS properties to give it the style we need. You can customize the styles object according to your requirements.

import React, { CSSProperties } from "react";
import { HeadlessButton } from "@locoworks/reusejs-react-button";

const CSSStyledButton = () => {
	const styles: CSSProperties = {
		background: "#5555ff",
		fontWeight: 700,
		color: "white",
		padding: "10px 20px 10px 20px",
		borderRadius: 20,
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
	};

	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<HeadlessButton style={styles}>Button</HeadlessButton>
		</div>
	);
};

export default CSSStyledButton;

Hover Button

This Button provides a beautiful and subtle animation effect which will be in effect whenever a user hovers over the button.

import React from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const HoverButton = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseButton className="relative bg-white inline-block text-lg group">
				<span className="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
					<span className="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
					<span className="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
					<span className="relative">Button Text</span>
				</span>
				<span
					className="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
					data-rounded="rounded-lg"
				></span>
			</ReuseButton>
		</div>
	);
};

export default HoverButton;

Floating Button

This is a bouncing icon button. This button will give a small bouncing effect to the icons as long as the cursor is hovering over the button.

import React from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const FloatingButton = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseButton className="z-90 bottom-10 right-8 bg-blue-600 w-20 h-20 rounded-full drop-shadow-lg flex justify-center items-center text-white text-4xl hover:bg-blue-700 hover:drop-shadow-2xl hover:animate-bounce duration-300">
				&#9993;
			</ReuseButton>
		</div>
	);
};

export default FloatingButton;

Button with Icon

This is an icon button which can have any text along with the icon. It gives a subtle darkening effect whenever a user hovers over the button.

import React from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const ButtonWithIcon = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseButton
				data-te-ripple-init
				data-te-ripple-color="light"
				className="flex items-center rounded bg-blue-600 px-6 pb-2 pt-2.5 text-xs font-medium leading-normal text-white shadow-lg transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-2xl focus:bg-blue-700 focus:shadow-2xl focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-2xl dark:shadow-2xl dark:hover:shadow-lg dark:focus:shadow-lg dark:active:shadow-lg"
			>
				<span className="mr-5 text-4xl" role="img" aria-label="Envelope icon">
					&#9993;
				</span>
				Button
			</ReuseButton>
		</div>
	);
};

export default ButtonWithIcon;

Neutral Button

These buttons can be associated with a functionality of theme or they can be used as buttons in an application where you want a B&W kind of theme.

import React from "react";
import { ReuseButton } from "@locoworks/reusejs-react-button";

const NeutralButton = () => {
	return (
		<div className="flex gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseButton className="inline-block rounded bg-neutral-50 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-800 shadow-[0_4px_9px_-4px_#cbcbcb] transition duration-150 ease-in-out hover:bg-neutral-100 hover:shadow-[0_8px_9px_-4px_rgba(203,203,203,0.3),0_4px_18px_0_rgba(203,203,203,0.2)] focus:bg-neutral-100 focus:shadow-[0_8px_9px_-4px_rgba(203,203,203,0.3),0_4px_18px_0_rgba(203,203,203,0.2)] focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-[0_8px_9px_-4px_rgba(203,203,203,0.3),0_4px_18px_0_rgba(203,203,203,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(251,251,251,0.3)] dark:hover:shadow-[0_8px_9px_-4px_rgba(251,251,251,0.1),0_4px_18px_0_rgba(251,251,251,0.05)] dark:focus:shadow-[0_8px_9px_-4px_rgba(251,251,251,0.1),0_4px_18px_0_rgba(251,251,251,0.05)] dark:active:shadow-[0_8px_9px_-4px_rgba(251,251,251,0.1),0_4px_18px_0_rgba(251,251,251,0.05)]">
				Light
			</ReuseButton>
			<ReuseButton className="inline-block rounded bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 shadow-[0_4px_9px_-4px_rgba(51,45,45,0.7)] transition duration-150 ease-in-out hover:bg-neutral-800 hover:shadow-[0_8px_9px_-4px_rgba(51,45,45,0.2),0_4px_18px_0_rgba(51,45,45,0.1)] focus:bg-neutral-800 focus:shadow-[0_8px_9px_-4px_rgba(51,45,45,0.2),0_4px_18px_0_rgba(51,45,45,0.1)] focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-[0_8px_9px_-4px_rgba(51,45,45,0.2),0_4px_18px_0_rgba(51,45,45,0.1)] dark:bg-neutral-900 dark:shadow-[0_4px_9px_-4px_#030202] dark:hover:bg-neutral-900 dark:hover:shadow-[0_8px_9px_-4px_rgba(3,2,2,0.3),0_4px_18px_0_rgba(3,2,2,0.2)] dark:focus:bg-neutral-900 dark:focus:shadow-[0_8px_9px_-4px_rgba(3,2,2,0.3),0_4px_18px_0_rgba(3,2,2,0.2)] dark:active:bg-neutral-900 dark:active:shadow-[0_8px_9px_-4px_rgba(3,2,2,0.3),0_4px_18px_0_rgba(3,2,2,0.2)]">
				Dark
			</ReuseButton>
		</div>
	);
};

export default NeutralButton;

Live Playground

This is a live playground sample that you can use to create a working sample of your code and copy to use in your own application.


<HeadlessButton 
  className="bg-red-300 border-2 border-red-400 px-2 py-1 font-bold hover:border-blue-500 hover:bg-blue-500 transition-all" 
  onClick={()=>console.log("Hello")}
>
  Click!!
</HeadlessButton>