Button

Usage

import { Button } from "@/components/ui/button";

export function SaveBar() {
  return <Button onClick={save}>Save changes</Button>;
}

Render as a link — the child element receives all styling and behaviour, so use this whenever the trigger navigates rather than acts:

<Button asChild variant="outline">
  <Link href="/docs">Read the docs</Link>
</Button>

Async actions should use loading rather than swapping the button for a spinner. The button stays mounted, keeps focus, and is announced as busy:

<Button loading={isSaving} loadingLabel="Saving changes">
  Save
</Button>

Features

• Six variants, four sizes, all resolved from the same semantic tokens — restyling the system restyles every button without touching this file.
• asChild polymorphism: renders a Link, an <a>, or any element with the button's full styling and behaviour, so a navigating trigger never has to fake it.
• A real loading state that keeps the button mounted and focused rather than swapping it for a spinner, and announces itself with aria-busy.
• Press feedback that degrades honestly — the transform drops under prefers-reduced-motion while colour and ring changes still communicate the state.

Variants

default is the single primary action in a view. Everything else steps down from it — contrast carries the hierarchy, not colour.

Sizes

icon renders a square target for icon-only triggers — always pair it with an aria-label.

Loading

Disabled

Props

All other props are forwarded to the underlying <button> element.

Accessibility

• Renders a native <button>, so keyboard activation via Enter and Space is browser-native.
• The focus ring is a 3px ring token offset from the border colour, visible in both themes.
• size="icon" has no text content — supply aria-label. The demo above shows the pattern.
• loading sets aria-busy and renders visually hidden status text rather than removing the label, so the button's accessible name never changes mid-interaction.
• Under prefers-reduced-motion the press transform is removed; colour and ring changes still communicate the state.