Button
Displays a button or a component that looks like a button.
pnpm dlx shadcn@latest add @ffg/button
import { Button } from "@/components/ui/button";
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>
| Variant | Rest | Hover | Active |
|---|
default (primary) | Primary fill | Fill at 90% | Primary fill |
secondary | Hairline border, secondary text | Primary border and text | Primary fill |
ghost | Secondary text, no box | Background fill, hairline border, primary text | Primary text |
destructive | Destructive at 10% | Destructive at 20% | Destructive at 10% |
link | Secondary text | Primary text, underlined | Primary text |
| Size | Height | Label | Icon |
|---|
default | 48 | 14 | 24 |
sm | 42 | 13 | 21 |
lg | 54 | 14 | 24 |
icon | 48 × 48 | — | 24 |
icon-sm | 42 × 42 | — | 21 |
