Tag
An interactive label for categorization, filtering, or selection. Supports color variants and removable behavior.
Variants
DefaultSecondaryOutline
Status Variants
InfoSuccessWarningDanger
Removable
ReactTypeScriptTailwind
Tag vs Badge
TagInteractive — can be added, removed, and grouped for filtering or selection.
BadgeStatic — displays a status, count, or label. Not interactive.
Usage
Use Tags for interactive labels that users can add or remove, such as filter chips, selected categories, or applied criteria.
Use Badges for static status indicators, counts, or labels that are not interactive.
Status variants (info, success, warning, danger) use the same color tokens as Alert and Toast for consistency across the design system.
Provide the onRemove callback to make tags dismissible.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "info" | "success" | "warning" | "danger" | "default" | Visual style |
| onRemove | () => void | — | Renders a remove button and calls this handler |