Button

Triggers an action or event, such as submitting a form or opening a dialog.

export default function ButtonHero() {
  return <Button>Get started</Button>;
}

Installation

pnpm dlx shadcn@latest add button

import { Button } from '@/registry/ui/button';

<Button>Button</Button>;

The variant prop controls the visual style of the button.

export function ButtonSolid() {
  return <Button variant="solid">Sign up</Button>;
}

The theme prop applies a color scheme across all variants.

export function ButtonGray() {
  return <Button theme="gray">Cancel</Button>;
}

Icons can be placed alongside button text. The button handles icon sizing automatically.

export function ButtonLeading() {
  return (
    <Button>
      <PlusCircleIcon />
      Create New
    </Button>
  );
}

Use size="icon" for icon-only buttons.

Accessibility

Always provide an aria-label on icon-only buttons. Without visible text, screen readers have no way to describe the button's purpose.

export default function ButtonIconButton() {
  return (
    <Button size="icon" aria-label="Add">
      <PlusCircleIcon />
    </Button>
  );
}

Prop	Type	Default
`variant`	`"solid" \| "outline" \| "surface" \| "soft" \| "ghost"`	`"solid"`
`theme`	`"gray" \| "accent" \| "destructive"`	`"gray"`
`className`	`string`	—

All other props are forwarded to the underlying Base UI Button primitive.

On this page