chrome
<tc-badge>
Compact label with five variant colors and an optional pill shape. Pure presentation.
import
"@ra9/tan-compose-kit/badge"
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | Visual color preset. |
size | "sm" | "md" | "md" | Padding + font scale. |
pill | boolean | false | Render with fully-rounded ends. |
Slots
| Slot | Description |
|---|---|
(default) | Badge content. Usually a short word or count. |
CSS variables
| Variable | Default | Description |
|---|---|---|
--tc-badge-radius | var(--tc-radius-sm, 6px) | Corner radius (ignored when `pill` is true). |
--tc-badge-font | var(--tc-font-sans, …) | Font family. |
--tc-badge-neutral-bg | var(--tc-color-rule, #ece5d3) | Neutral background. |
--tc-badge-neutral-fg | var(--tc-color-ink, #14171f) | Neutral foreground. |
--tc-badge-info-bg | var(--tc-color-info-bg, #dde6f4) | Info background. |
--tc-badge-info-fg | var(--tc-color-info-fg, #1f3a66) | Info foreground. |
--tc-badge-success-bg | var(--tc-color-success-bg, #dbece2) | Success background. |
--tc-badge-success-fg | var(--tc-color-success-fg, #155b40) | Success foreground. |
--tc-badge-warning-bg | var(--tc-color-warning-bg, #f5e7cf) | Warning background. |
--tc-badge-warning-fg | var(--tc-color-warning-fg, #7a4f0a) | Warning foreground. |
--tc-badge-danger-bg | var(--tc-color-danger-bg, #f4dad7) | Danger background. |
--tc-badge-danger-fg | var(--tc-color-danger-fg, #7a1a14) | Danger foreground. |
Examples
Variants
Sizes
Pill
Inside other components
Badges combine well with cards, table cells, and nav items.
Theming
Accessibility
- The badge is purely visual — it doesn't carry semantic meaning by itself. If the badge is the only signal of a state (e.g. "unread"), add an
aria-labelor surrounding text so screen readers get the message. - Contrast is tuned to pass AA on the default surface for every variant. When overriding the tokens, re-check contrast.