Button

Buttons are one of the most essential interactive components in any interface. They drive actions, confirm decisions, and guide users through flows. Our button system includes multiple styles, states, and sizes to accommodate everything from primary calls to action to subtle interface utilities. Designed for flexibility and consistency, each button variant maintains balance in spacing, icon placement, and accessibility, ensuring clarity at every interaction point.

Interactive Playground

Try out different combinations of props to see how the button looks:

variant

size

appearance

disabled

pending

children

<Button>Click me</Button>

Variants

The button comes in five variants: primary, secondary and destructive.

Sizes

Buttons are available in three sizes: small, medium, and large.

<Button size="sm">Small Button</Button>
<Button size="md">Medium Button</Button>
<Button size="lg">Large Button</Button>

Icons

Buttons can include leading and/or trailing icons for enhanced visual communication:

<Button leadingIcon={<Plus className="size-5" />}>Add Item</Button>
<Button trailingIcon={<ArrowRight className="size-5" />}>Continue</Button>
<Button leadingIcon={<Download className="size-5" />} trailingIcon={<ArrowRight className="size-5" />}>Download</Button>

Icons work with all button variants and sizes:

Pending State

Buttons can show a loading spinner when an action is in progress. The button is automatically disabled while pending.

<Button pending>Loading</Button>
<Button variant="secondary" pending>Processing</Button>
<Button variant="destructive" pending>Deleting</Button>

Props

Prop	Type	Default	Description
variant	primary, secondary, destructive	primary	The visual style variant of the button
size	sm, md, lg	md	The size of the button
appearance	default, stroke, lighter, ghost	default	The appearance of the button
disabled	boolean	false	Whether the button is disabled
pending	boolean	false	Shows a loading spinner and disables the button
iconOnly	boolean	false	Whether the button only has an icon
leadingIcon	React.ReactNode	-	Icon to display before the button text
trailingIcon	React.ReactNode	-	Icon to display after the button text
children	React.ReactNode	-	The content to display inside the button

The Button component also accepts all standard HTML button attributes (onClick, disabled, type, etc.).

Special Buttons

Special buttons feature expressive, visually distinct styles that draw attention and signal high-priority or standout actions. These might include bright color fills, gradients, outlines, shadows, or animated icons — all designed to elevate the button’s presence in the interface. They’re best used for actions that require emphasis, like “Upgrade Plan,” “Launch Now,” or marketing-focused CTAs. Use them sparingly to preserve their impact.