Tag
Categorization labels. Non-interactive — for what a record *is*, not what a user can *do*.
Tag is the indicator-family sibling of Badge and Chip. Use it to label what a record is — its industry, segment, owner, size, or any other neutral category. Tag is read-only.
Tag
Use when: Neutral categorization. Industry, owner, segment, size — facts that have no value judgment.
Don't: Use it as a status indicator — that's Badge.
<Tag>Cosmetic</Tag>Badge
Use when: Status with a value judgment (good/bad/waiting). Active, Failed, In review.
Don't: Use for neutral categorization — that's Tag.
<Badge status="positive">Active</Badge>Chip
Use when: Interactive pill — toggleable filter, dismissible selection, dropdown trigger.
Don't: Render with no handler — that's Tag.
<Chip label="Cosmetic" onRemove={...} />Use it for
- Industry, segment, vertical labels (Dental, Real Estate, Cosmetic)
- Owner attribution chips on rows
- Categorical metadata that doesn't carry a status meaning
- Non-interactive labels that need consistent visual treatment
Import
import { Tag } from '@brikdesigns/bds';Variants
Four sizes (xs is icon-only) and two appearances.
Sizes
Appearances
solid (default) is neutral filled. subtle is transparent with a hairline border — lower visual weight when Tags sit on a colored surface.
<Tag appearance="solid">Cosmetic</Tag>
<Tag appearance="subtle">Cosmetic</Tag>With icons
Pass icon (left) or trailingIcon (right). Icon is required when size="xs" (icon-only).
<Tag icon={<CertificateIcon />}>Featured</Tag>
<Tag trailingIcon={<XCircleIcon />}>Dismiss</Tag>
<Tag size="xs" icon={<CrownIcon />} />Disabled
<Tag disabled>Archived</Tag>When not to use
Tag is read-only. Never wire onClick, never wrap in a <Link>, never trigger behavior. The onRemove prop exists for backward compat but is deprecated — migrate removable pills to Chip.
- Don't use Tag for status with a value judgment. "Active" / "Failed" / "Pending" are Badge.
- Don't use Tag for interactive pills. Filter toggles, dismissible selections, dropdown triggers are Chip.
Accessibility
- Renders a
<span>— non-interactive by default. - Text content is the accessible name. For
xs(icon-only), passaria-label.
API
| Prop | Type | Default |
|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' |
appearance | 'solid' | 'subtle' | 'solid' |
icon | ReactNode | — |
trailingIcon | ReactNode | — |
disabled | boolean | false |
children | ReactNode | — |
onRemove | () => void | (deprecated — use Chip) |
Related
- Badge — status sibling
- Chip — interactive sibling
- TagGroup — multi-tag cluster
- Storybook playground