Need Review

Last modified:

Styles for submission states and priority assignment.

ℹ️ This component has outgrown its original scope of use and is in need of a design review.


Example of Badges - default

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.


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.


Last modified:

Note the ‘confirmed’ sub-state is the default.

The following variants are available:

.bc-badge--unconfirmedWith colored borders and a white background color.
.bc-badge--textFor word strings (since the priority number badges are monospaced by default).
.bc-badge--text-upcasedFor word strings that still need to be capitalized.
.bc-badge--successFor ‘tagging’ something as live or successful (eg. verified researcher IDs or live, in-scope targets).
.bc-badge--failureFor ‘tagging’ something as failed
.bc-badge--counterFor numbers.
.bc-badge--tokenFor key:value tokens.


Last modified:

Badges offer no semantics by themselves, so they must be nested in other semantic markup.

See the HTML guidance.


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: