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 |
Use the .badge-pillmodifier class to make badges more rounded.
Use the .badge-outlinemodifier class to create outline badges.
Create soft badges using .badge-soft-*modifier class.
Add .badge-indicatorto display badge as an indicator.
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Badges can be used as part of links or buttons to provide a counter.