Components
Badge
Compact status indicator. Six variants (default, teal, success, warning, danger, outline) using the role-token color set with tinted backgrounds and matching foreground text.
Installation
terminal
npx shadcn@latest add @wuko/badgeVariants
Each tinted variant maps to a single role token: teal → --wuko-accent, success → --wuko-success-fg, warning → --wuko-warning-fg, danger → --wuko-danger-fg. Override the token to retheme the variant. Default and outline use neutral surface tokens (--wuko-card, --wuko-text, --wuko-border), so they remain visually stable when consumers customize accent palettes.
DefaultNewLiveBetaDownOutline
tsx
<Badge>Default</Badge>
<Badge variant="teal">New</Badge>
<Badge variant="success">Live</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="danger">Down</Badge>
<Badge variant="outline">Outline</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "teal" | "success" | "warning" | "danger" | "outline" | "default" | Color treatment. Tinted variants (teal, success, warning, danger) render the foreground role token at 15% background opacity and 30% border opacity. Default and outline use neutral surface tokens. |
| children | ReactNode | — | Badge content. Typically a short uppercase label; supports inline icons via the gap-1 flex layout. |
| className | string | — | Tailwind classes merged onto the root span. |
| ...rest | HTMLAttributes<HTMLSpanElement> | — | All native span attributes are forwarded: id, aria-*, data-*, onClick, etc. |