Badge
Compact status label in solid, soft, and outline variants.
display
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Label
Variant
Tone
Status dot
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Badge label content. |
variant | "solid" | "soft" | "outline" | "soft" | Visual style. |
tone | "brand" | "neutral" | "success" | "warning" | "danger" | "brand" | Semantic color. |
dot | boolean | false | Show a leading status dot tinted to the tone. |
className | string | — | Extra classes for the badge. |