Component

Button

Triggers actions, submits forms, or navigates. The most fundamental interactive element in the system.

Usage

Use buttons to initiate actions. Choose the variant that reflects the importance of the action.

Playground

Preview

Configure

Button text

Icon only, or paired with label on the left or right, not both sides

No

Code

import { Button } from "@/components/ui/button"
<Button>Button</Button>

Props

PropTypeDefault valueDescription
variant"default" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"Visual treatment for the button.
size"xs" | "sm" | "default" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"Controls height, padding, and icon sizing. Use an icon size for icon-only buttons.
disabledbooleanfalsePrevents interaction and applies disabled styling.
childrenReactNode, Button label or icon content. Pair size="icon" with an icon and aria-label.
classNamestring, Additional classes merged onto the root element.

Do

  • Use default for primary actions, one per view
  • Use outline or ghost for secondary actions
  • Use destructive for irreversible actions like delete

Don't

  • Don't use more than one primary button per section
  • Don't use link variant for navigation within forms