Variants
Example of Badges - default
React documentation
Last modified:
ℹ️ This feature doesn’t have a corresponding React component yet.
HTML
Last modified:
As Badges are often ‘values’ for or of a thing, use semantic markup to wrap them.
For example:
- Inside a
<dd>following a<dt>in a definition list - In an ARIA live region Page alert
- In semantic data tables, where cell position and column table headers give the Badge meaning.
Design
Last modified:
Note the ‘confirmed’ sub-state is the default.
The following variants are available:
| Variant | Purpose |
|---|---|
.bc-badge--unconfirmed | With colored borders and a white background color. |
.bc-badge--text | For word strings (since the priority number badges are monospaced by default). |
.bc-badge--text-upcased | For word strings that still need to be capitalized. |
.bc-badge--success | For ‘tagging’ something as live or successful (eg. verified researcher IDs or live, in-scope targets). |
.bc-badge--failure | For ‘tagging’ something as failed |
.bc-badge--counter | For numbers. |
.bc-badge--token | For key:value tokens. |
Accessibility
Last modified:
Badges offer no semantics by themselves, so they must be nested in other semantic markup.
See the HTML guidance.
Rationale
Last modified:
Badges or “pills” provide scannable visual indicators used for marking or labelling important data points.
When using Badges be careful of:
- Overuse
- Layout placement, as they (intentionally) draw the eye.
See also
Last modified: