Button

Trigger actions, submit forms, and navigate. Supports multiple variants, sizes, loading states, and icon slots.

Playground

Label

variant

size

leftIcon

rightIcon

outline

iconOnly

disabled

rounded

<Button>
  Click me
</Button>

Five visual styles, plus outline mode for any variant.

Three sizes to fit different layout densities.

Pass a string name directly to leftIcon or rightIcon. No import needed.

Every available icon name for the iconOnly shorthand.

You can still pass any ReactNode to leftIcon and rightIcon.

Set loading to show a spinner and disable the button automatically.

Visually muted and non-interactive.

Square button for icon-only actions. Pass the icon via leftIcon, not children.

Combine outline with the color prop to change border and text color.

API

Property	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "danger" \| "warning" \| "ghost"`	"primary"	Visual style variant of the button
`outline`	`boolean`	false	Outline style with transparent background and colored border
`size`	`"sm" \| "md" \| "lg"`	"md"	Size preset
`loading`	`boolean`	false	Show loading spinner and disable interaction
`disabled`	`boolean`	false	Disable the button
`iconOnly`	`boolean`	false	Square button for icon-only use, hides children text
`leftIcon`	`ButtonIconName \| ReactNode`		Icon before the label. Pass a ReactNode or a string name: "plus" \| "download" \| "upload" \| "import" \| "export" \| "close" \| "save" \| "delete" \| "arrow-right" \| "arrow-left" \| "arrow-top" \| "arrow-down"
`rightIcon`	`ButtonIconName \| ReactNode`		Icon after the label, same string names as leftIcon
`color`	`"danger" \| "warning" \| "secondary"`		Color override for outline buttons
`onClick`	`(e: MouseEvent) => void`		Click handler