Toggle state — click to try
Off → On — all colors
LimeVioletPinkYellowCoralTealDark
Removable chips
onRemove prop — click × to dismiss
DesignDevelopmentMarketingAnalytics
Sizes & shapes
sm / md · square / pill
Small
Medium
Pill
Sm pill
Disabled
Badge vs Tag
When to use each
Active
Active
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | — | Controlled active state. Omit to use uncontrolled. |
| defaultActive | boolean | false | Initial state for uncontrolled usage. |
| onChange | (active: boolean) => void | — | Called on toggle with the new active state. |
| onRemove | () => void | — | When provided, renders a × button. Caller is responsible for removing the tag. |
| color | "lime"|"violet"|"pink"|"yellow"|"coral"|"teal"|"dark" | "lime" | Active fill color. |
| size | "sm"|"md" | "md" | Chip size. |
| pill | boolean | false | Fully rounded pill shape. |
| disabled | boolean | false | Mutes opacity, disables interaction. |
Usage
import { Tag } from "components/core/Tag";
// Uncontrolled toggle
<Tag color="lime">All</Tag>
// Controlled
<Tag
active={filter === "active"}
onChange={() => setFilter("active")}
color="violet"
>Active</Tag>
// Removable chip
<Tag
active
onRemove={() => removeTag(id)}
color="pink"
>Design</Tag>