In headings
A badge scales with the heading level it sits next to.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Sizes
Three sizes, with an optional icon before or after the label.
Default
Left icon
Right icon
Default
Left icon
Right icon
Default
Left icon
Right icon
Positioned
Attach a count or a dot to a button with .badge-notification.
In a dropdown
A badge inside a dropdown item.
On buttons
Pair any badge color with a button label.
Notification dot
A pill-shaped counter positioned on the corner of a button.
Blinking notification
Add .badge-blink to draw attention to unread activity.
Basic
Fill a badge with a theme or extended color.
BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyanDarkLight
Light
A tinted background for a softer, secondary badge.
BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyanDarkLight
Outline
A colored border with a transparent background.
BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyanDarkLight
With icons
Add an icon before the label to reinforce its meaning.
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
Dark
Light