Build Assets
UI Component
Badge / Tag
Compact label for status, category, count, or metadata.
Platform: bothTags: badge, tag, label, status, chip
Purpose
Communicates a compact piece of metadata inline with other content — status (Active, Archived), category (Design, Engineering), count (3 new), or a removable filter. Not interactive by default; add × for removable variants.
Anatomy
- Container: pill shape (999px radius) or rounded (4px)
- Label: 11–13px, medium weight, uppercase for status / sentence case for categories
- Optional icon: 10–12px leading icon for semantic types
- Optional remove button: × at right edge for dismissible chips
States
- Default: static, read-only label
- Interactive (clickable): hover background shift, cursor pointer
- Removable: × button visible on hover or always
- Disabled: 50% opacity
Tokens
spacing
paddingX: 8pxpaddingY: 3pxiconGap: 4px
sizing
height: 20pxborderRadius: 999pxfontSize: 0.6875rem
Do
- Use a consistent color system: semantic (green=active, red=error) or categorical (color per type)
- Keep text to 1–3 words — badges are scanned, not read
- Use filled background for high-emphasis status, outline for low-emphasis categories
- Apply Von Restorff: badges only work if most items DON'T have them
Don't
- Use more than 3 badge colors in the same view — creates visual noise
- Use badges as the only way to convey critical status (pair with text/icon)
- Make badge text longer than 20 characters
- Use badges for primary navigation or actions
Accessibility
- Ensure badge text is included in the accessible name of its parent when context-dependent
- Don't rely on color alone — label text must convey the meaning
- If count badge overlaps an icon button, add aria-label: "Notifications, 3 unread"