Components
Buttons
Actions, variants, sizes, and loading states.
Variants
Choose emphasis to match the action. These are live buttons—click one to try its interaction state.
Try any variant above.
View code
import { Button } from "@repo/ui/components/ui/button"
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>Sizes & states
Pair loading indicators with text, and disable actions while work is in progress.
View code
<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>
<Button disabled><Spinner data-icon="inline-start" />Loading</Button>