Button

Actions across variants and sizes.

Variants

Six treatments. default is the primary action. link is inline text with an underline on hover.

<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>

Output themes

The action takes the color of the asset received, including on hover.

Sizes

Heights from 24px to 60px. default is 36px, the height stable-app uses most.

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>

Icon sizes

Square sizes for one icon. Give the button an aria-label, the icon has no text.

<Button size="icon-xs" aria-label="Refresh"><RefreshCw /></Button>
<Button size="icon-sm" aria-label="Refresh"><RefreshCw /></Button>
<Button size="icon" aria-label="Refresh"><RefreshCw /></Button>
<Button size="icon-lg" aria-label="Refresh"><RefreshCw /></Button>

With icons

Icons sit in children before or after the label. The button sizes them to 16px, 12px in the xs sizes, unless the icon carries its own size class.

<Button size="md">
  <Plus />
  Add position
</Button>
<Button variant="outline" size="md">
  Continue
  <ArrowRight />
</Button>
<Button variant="destructive" size="md">
  <Trash2 />
  Delete
</Button>

States

disabled blocks pointer events and fades the button. An outline, secondary, or ghost button that owns an open menu reads aria-expanded and keeps its hover fill.

<Button size="md" disabled>Disabled</Button>
<Button variant="outline" size="md" disabled>Disabled outline</Button>
<Button variant="outline" size="md" aria-expanded>Expanded</Button>

Props

Button is base-ui's Button with a variant and a size. Every native button attribute passes through.

The element carries data-slot="button" and data-size for tests and for the icon rules.

variantButtonVariantdefault: 'default'

The visual treatment. default is the primary action in the display face, uppercase.

sizeButtonSizedefault: 'default'

Height, padding, and text size. The icon sizes are square and expect one icon child.

disabledbooleandefault: false

Blocks interaction and halves the opacity.

type'button' | 'submit' | 'reset'default: 'button'

The native button type.

renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Replace the element. Pass a next Link to render the button as a link.

classNamestring | ((state: ButtonState) => string | undefined)

Appended after the button's own classes. A bridge for tailwind product code.

childrenReactNode

The label, with optional icons before or after it.