Badges

Alphanumeric status indicators associated with a button or anchored element:

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Use the .badge class within elements to create badges:

Small count element

News 5
Event Delegates 71

The numbers (5 and 71) are the badges wrapped in the badge-primary class.

The following example shows how to add badges to buttons:

Labelling element

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Danger Warning Info Light Dark Copy

Primary Secondary Success Danger! Warning! Info Light Dark