Badges

Notes on Implementation

We do not use Bootstrap’s Badges component, but implement our own with increased color contrast. The documentation for Bootstrap Badges is applicable, along with the Accessibility Notes below.

Accessibility Notes

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Examples

Default Badge Styles

A basic badge can be created with the .badge class. Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

yale primary secondary success info warning danger light dark

Pill Badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from Bootstrap v3.

yale primary secondary success info warning danger light dark

Using the contextual .badge-* classes on an element quickly provide actionable badges with hover and focus states.