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 5Event 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