Components
Badge
Pill-shaped labels with an optional glyph, e.g. a page's status.
Live example
Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).
Proposed
.ct-badgeCode
<span class="ct-badge"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="#i-refresh"></use></svg>Proposed</span>Tokens
From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.
| Custom property | Value | Alias |
|---|---|---|
--ct-badge-background | var(--accent-tint) | {colors.accentTint} |
--ct-badge-color | var(--accent) | {colors.accent} |
--ct-badge-font-size | var(--fs-sub) | {type.sub} |
--ct-badge-font-weight | var(--weight-bold) | {weight.bold} |
--ct-badge-gap | var(--space-8) | {space.s8} |
--ct-badge-height | 30px | |
--ct-badge-padding-x | var(--space-12) | {space.s12} |
--ct-badge-radius | var(--radius-pill) | {radius.pill} |
Usage
Do
- Use a badge for a page or object status, such as a spec version.
Don't
- Don't use a badge as a button or a filter; use a chip or route toggle.
Accessibility
- A badge is text; when it carries a glyph, the glyph is
aria-hidden.