Button

Triggers an action. One primary action per view.

Variants

<Button>Deploy</Button>
<Button variant="secondary">Preview</Button>
<Button variant="outline">Settings</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="link">Docs</Button>
<Button variant="destructive">Delete</Button>

Sizes

Disabled

Icons & shapes

Square is the default; add rounded-full for a circle shape. A leading icon is a prefix, a trailing icon a suffix.

{/* icon-only (square) */}
<Button size="icon" variant="outline" aria-label="New note">
  <PlusIcon />
</Button>
{/* circle shape */}
<Button size="icon" variant="outline" className="rounded-full" aria-label="New note">
  <PlusIcon />
</Button>
{/* prefix / suffix icons */}
<Button><PlusIcon /> New note</Button>
<Button variant="secondary">Continue <ArrowRightIcon /></Button>

Rounded

Loading

A Spinner in the slot plus disabled gives the loading state — the button stays focusable and announces to screen readers.

Button group

Wrap related buttons in ButtonGroup to seam them into a single segmented control. The Button Group page covers separators, sizes and inputs.

<ButtonGroup>
  <Button variant="outline">Write</Button>
  <Button variant="outline">Preview</Button>
  <Button variant="outline">Publish</Button>
</ButtonGroup>

Custom & render

Read the docs

Override colors with className for custom buttons. Base UI uses render={<a/>} instead of shadcn’s asChild.

{/* custom colors via className */}
<Button className="bg-success text-white hover:bg-success/90">Merge</Button>

{/* render as another element (Base UI render, not asChild) */}
<Button variant="link" render={<a href="/docs" />}>Read the docs</Button>

Markdown for agents: /design/button.md · spec: /design.md