Docs draft
Tag
Component storyFigma component set ↗React component ↗DSDS entity ↗
When to use it
useRead-only metadata on media: Sub | Dub, HD, 78 Videos, Mature, release dates.
avoidAnything clickable or removable. Tags never take pointer events.
badgeavoidRegional rating marks (BR/NZ/Universal). Those are data-driven artwork, not text tags.
rating-mark Planned.Variants
tone · neutral / emphasis / accent / positive / negative — neutral = the old silver metadata; emphasis = the old white; accent = HD/4K/Premium orange via accent.text (gate-safe on light); positive = the old Movie green; negative = the old Mature red. Series teal died with Scooter.
size · default / tiny — type.body-sm / type.caption. The old Tiny was 12 Bold; caption's 12 Medium replaces it.
Guidelines
must-notDo not attach click handlers to Tags. — The old system blurred markers and chips; the split is the point of having both Tag and Badge.
mustContent is data passed as the label; never add a new variant for a new content type. — 22 content-type variants is how the old set got here.
Design specifications
| type-default | type.body-sm |
| type-tiny | type.caption |
| color-neutral | color.text.secondary |
| color-emphasis | color.text.primary |
| color-accent | color.accent.text |
| color-positive | color.text.positive |
| color-negative | color.text.negative |
Accessibility
color.text.secondary on color.bg.primary — Contracted at ≥ 4.5:1 by the build gate.
color.accent.text on color.bg.primary — Contracted at ≥ 4.5:1 by the build gate.
Plain text spans; nothing focusable. Tone alone must not carry meaning that is not also in the text.