Button

Buttons trigger actions. Use variant and size props to match the hierarchy of each action in your interface.

Variants

tsx

<Button variant="gradient">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Sizes

tsx

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

With Icons

tsx

<Button variant="gradient" icon={<PlusIcon />}>
  Add Item
</Button>

Disabled

tsx

<Button disabled>Primary</Button>

Loading

Click to see the spinner

tsx

<Button loading={isLoading} onClick={handleSave}>
  {isLoading ? "Saving..." : "Save"}
</Button>

Props

Prop	Type	Default	Description	Required
variant	`"gradient" \| "secondary" \| "ghost" \| "danger"`	"gradient"	Visual style of the button	No
size	`"sm" \| "md" \| "lg"`	"md"	Controls padding and font size	No
disabled	`boolean`	false	Disables interaction and dims the button	No
loading	`boolean`	false	Shows a spinner and disables the button	No
icon	`ReactNode`	-	Icon element rendered before the label	No
onClick	`() => void`	-	Click handler	No
children	`ReactNode`	-	Button label content	No

Usage Guidelines

Use gradient for the single primary action on a page.
Use secondary for supporting actions alongside a primary button.
Use ghost for low-emphasis or navigation-style actions.
Use danger for destructive actions like delete or remove.
Always provide a loading state for async operations.
Pair icons with text labels for clarity, do not use icon-only buttons without a tooltip.