Components
Badge
A short label on an item: a count, a type, a tag.
Preview
BrandProduct
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add badgeExamples
Variants
DefaultSecondaryOutlineGhostDestructive
Props
The ones that change how it looks or behaves. The rest are the HTML element's own.
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "secondary" | "outline" | "destructive" | "ghost" | "default" |
| asChild | boolean | false |
Guidelines
Use it
- One or two words.
- For a state (Done, Active), use Status badge.
Don't
- Make it clickable without asChild and a link or button inside.
Used in
The screens in this Base that show it, found in the code.
- A deck
- A pattern
- Colour
- Contracts & invoices
- Every page under /settings
- Get started
- Home
- Imagery
- Kickoff workshop: founder's view
- Logo
- Patterns
- Prototypes hub
- Settings: Account
- Settings: People
- Settings: Process
- Settings: Projects
- Sign in
- Slides
- Strategy & voice
- The app shell, on every screen
- Theming
- Typography