Badge
Contextual variations
Add any preset modifier classes to change the appearance of a badge. Using the contextual .badge-*classes on an <a>element quickly provide actionable badges with hover and focus states.
| Class | Values |
|---|---|
class="badge badge-[value]"
|
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Pill badges
Use the .badge-pillmodifier class to make badges more rounded.
Outline badges
Use the .badge-outlinemodifier class to create outline badges.
Soft badges
Brunette only
Create soft badges using .badge-soft-*modifier class.
Badge indicator
Add .badge-indicatorto display badge as an indicator.
Priority
Overdue
Upcoming
Completed
Working
Not Started
Hold
Canceled
Badges with headings
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
h1. Brunette heading New
h2. Brunette heading New
h3. Brunette heading New
h4. Brunette heading New
h5. Brunette heading New
h6. Brunette heading New
Button badges
Badges can be used as part of links or buttons to provide a counter.