Runway

The Button component can be customized with various colors, sizes, and shapes, has built-in loading states, hover effects, and supports icons. It can be rendered as either a button or a Next.js Link (if you provide the href prop).

Usage

jsx
1import Button from "@/components/atoms/Button";
2
3<Button
4  color="primary"
5  size="md"
6  onClick={() => alert("Button clicked!")}
7>
8    Click Me
9</Button>

Props

Prop	Type	Default	Description
children	ReactNode	-	The content of the button.
size	"sm" \| "md" \| "lg"	`"md"`	The size of the button.
color	string	`"primary"`	The base color (use tailwind.config).
borderRadius	string	`"md"`	The border radius of the button (uses Tailwind border radius to shape component).
hoverBg	boolean	`true`	If true, applies a hover background color.
scale	boolean	`false`	If true, gently scales up on hover.
lift	boolean	`false`	If true, lifts on hover.
active	boolean	`true`	If true, the button has an active press-down scale effect.
border	boolean	`false`	If true, adds a border.
shadow	boolean	`false`	If true, adds a subtle box-shadow.
loading	boolean	`false`	If true, shows a spinner instead of children.
disabled	boolean	`false`	If true, disables the button.
icon	ReactNode	-	If provided, the button will render an icon.
iconSrc	string	-	If provided, the button will render an image as an icon.
href	string	`""`	If provided, the button becomes a `Link` instead of a `button`.
onClick	function	-	The click handler for the button.
className	string	`""`	Additional Tailwind utility classes.
...props	object	-	Any other valid HTML attributes for the `button` or `Link`.

Extend or override styles with the className prop if you need custom colors or advanced styling.

Examples

Basic Usage

You can use the Button component like this:

Disabled & Loading

When disabled or loading is set, the button cannot be clicked, loading also shows a Loader.

Icons

Pass a React icon component (icon) or an external image (iconSrc).

As a Link

If you pass an href prop, the button renders as a Next.js Link.

Go to Docs

Combine href with a target="_blank" for external links if desired.

Avoid using href and onClick together if they lead to conflicting actions. href takes precedence.

Custom Style

Using Tailwind utility classes, you can create a custom button.