Tag
ImplementedRemovable label chip — used in filter bars, multi-select displays, taxonomy. Has a × button with aria-label='Remove {label}'.
patterns/atoms/tag.htmlStatic label for taxonomy, genre, or category metadata. FR-CA: Étiquette de taxonomie statique.
Tag
Display atom (Family 2 — Tier 1)
For interactive filter chips use Chip. For numeric counts use Badge.
This component supports light and dark mode.
Usage
import { Tag } from '@epasslive/design-system'
<Tag label="Concert" variant="brand" />
<Tag label="VIP" variant="success" size="sm" />
<Tag label="Complet" variant="error" />When to use
- Static taxonomy labels next to event titles.
- Result list meta (genre, salle, langue).
- Read-only state markers in admin tables.
Accessibility
Tag is a static <span>. Always include a meaningful label.
Props
label*stringVisible label text.
variant'neutral' | 'brand' | 'success' | 'warning' | 'error'neutralSemantic tone.
size'sm' | 'md'mdHeight/padding scale.
disabledbooleanfalseReduces opacity.
Props
Tag
labelstring—onRemove() => void—variant'neutral' | 'brand' | 'success' | 'warning' | 'error''neutral'Visual variant.
size'sm' | 'md' | 'pill''md'Visual size preset. sm/md are the chip presets (role=group, --ep-tap-min hit area for the optional remove button). `pill` is the NON-INTERACTIVE label preset: solid rounded label, centred, whitespace-nowrap, no tap-target expansion (WCAG 2.5.5 does not apply to a non-control) and no role — a label that groups nothing must not claim to. Ignored when onRemove is supplied.
disabledbooleanfalseDisables the control.
<Tag />Accessibility
Type
1 ruleARIA
1 rulea11y
1 rulevisual
1 rulelayout
1 ruleUsage
Import
import { Tag } from "@epasslive/design-system"Example 1
<Tag />Example 2
<Tag variant="default" />Example 3
<Tag label="Package" variant="brand" size="pill" />Anti-patterns
— Do not compose atoms directly — use molecules instead
— Avoid inline styles on atoms