Button
View on shadcn/uiDisplays a button or a component that looks like a button.
Latest release: March 3rd, 2026 (1.1.0)
- Updated the link variant
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/button.jsonUsage
import { Button } from "@/components/ui/button";<Button variant="outline" size="lg">
Button
</Button>Examples
Sizes
| Size | Usage |
|---|---|
xs | Extra small button |
sm | Small button |
default | Default button |
lg | Large button |
icon-xs | Extra-small icon-only button |
icon-sm | Small icon-only button |
icon | Icon-only button |
icon-lg | Large icon-only button |
Variants
| Variant | Usage |
|---|---|
default | Primary action. Ideally, no more than one per screen. |
destructive | Primary destructive action, like Delete, Deactivate. |
success | Primary positive action, 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. |
Loading state
You can combine the Spinner component with buttons to indicate loading states.
API reference
Button
| 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 |