Badge
Visual label for status, categories, and counts. Uses semantic tokens (success / warning / destructive / info).
Variants
default / secondary / outline
DefaultSecondaryOutline
Semantic status
Each status combines bg-*-background, text-*-text and border-*-border.
success / warning / destructive / info
ActivePendingInactiveUnder review
With dot
Status indicator with a solid dot
ActivePendingInactiveUnder review
With icon
ApprovedWaitingOverdueReview
Counter
Used in notifications and groupings
31299+
Removable (chip)
São PauloResidentialIn negotiation
In a table
| Name | Status | Type |
|---|---|---|
| Aurora Building | Active | Residential |
| Star Tower | Pending | Commercial |
| Sun Block | Inactive | Mixed |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | secondary | danger | success | warning | destructive | info | outline | ghost | link | default | Base style, including Niemeyer semantic (success, warning, destructive, info) and the subtle shadcn-style danger |
| className | string | — | Extra classes |
Full shadcn composition, examples, and field tables: shadcn/ui — Badge (Radix)