Displays a button or a component that looks like a button.
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/button.json
import { Button } from "@/components/ui/button";
<Button variant="outline" size="lg">
Button
</Button>
| Size | Usage |
|---|
sm | Compact spaces, secondary actions |
default | Standard button size, most common use case |
lg | Prominent actions, hero sections |
icon-sm | Small icon-only buttons |
icon | Icon-only buttons, requires aria-label |
icon-lg | Large icon-only buttons |
| Variant | Usage |
|---|
default | Primary action. Ideally, no more than one per screen. |
destructive | Primary destructive actions like Delete, Deactivate. |
success | Primary positive actions like Approve, Activate. |
secondary | Secondary actions. |
destructive-secondary | Secondary destructive actions, like Delete, Deactivate. |
success-secondary | Secondary positive actions like Approve, Activate. |
outline | Tertiary actions; slightly less prominent than Secondary. |
ghost | Subtle actions. Good in dense contexts, like tables and lists. |
link | A button that looks like a link. |
You can combine the Spinner component with buttons to indicate loading states.
| Prop | Type |
|---|
variant | "default" | "destructive" | "success" | "secondary" | "destructive-secondary" | "success-secondary" | "outline" | "ghost" | "link" |
size | "xs" | "sm" | "default" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" |
asChild | boolean |