Badge scaling
Badges scale to match the size of the immediate parent element by using relative font sizing and
em units
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badge in buttons
Badges scale to match the size of the immediate parent element by using relative font sizing and
em units
Regular buttons
Outline buttons
Status badges
These badges are unique and triggered by wrapping an element with
.status class. Comes with two badge sizes .status-sm and the default .status. Comes in 3 colors, .status-danger, .status-warning, and .status-success
Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
Default
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Border utility
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Pill badges
Use the
.badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Links example
Add
.badge-* class on a hyperlink element to convert it to actionable badges with hover and focus states
Nested badge
Use the included color utilities to change background and text colors. Below are examples of nested badge with different background colors
Nested Badge 1
Nested Badge 2
99+
Badge header
We use
.badge-icon with a combination of other utility classes to create a link badge. This class will auto turncate overflow giving you a nice clean look without any hassle