Badges
Documentation and examples for badges, our small count and labeling component.
Contextual variations
Add any preset modifier classes to change the appearance of a badge.
Pill badges
Use the pill prop to make badges more rounded.
Outline badges
Use the .badge-outline modifier class to create outline badges.
Soft badges
Create soft badges using .badge-soft-* modifier class.
Link Bages
Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
Sizes
use .badge-sm class for small badges.
Badge indicator
Add .badge-indicator to display badge as an indicator.
Priority
Overdue
Upcoming
Completed
Working
Processing
Not Started
Hold
Canceled
Badge with icon
Add any preset modifier classes to change the appearance of a badge. Using the contextual classes on an <a> element quickly provide actionable badges with hover and focus states.
Badge indicator sizes
Add .badge-indicator to display badge as an indicator.
Badge with indicator
Use.badge-dot .
Badges with headings
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
h1. Jampack heading New
h2. Jampack heading New
h3. Jampack heading New
h4. Jampack heading New
h5. Jampack heading New
h6. Jampack heading New
Badge status
Wrap with .badge-status.
Button badges
Badges can be used as part of links or buttons to provide a counter.