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.
PrimarySecondarySuccessDangerWarningInfoLightDarkindigopinkpurple
| 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.
PrimarySecondarySuccessDangerWarningInfoLightDark
Outline badges
Use the .badge-outlinemodifier class to create outline badges.
PrimarySecondarySuccessDangerWarningInfoLightDarkPrimarySecondarySuccessDangerWarningInfoLightDark
Soft badges
Brunette onlyCreate soft badges using .badge-soft-*modifier class.
PrimarySecondarySuccessDangerWarningInfoPrimarySecondarySuccessDangerWarningInfo
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.