Badges are inline elements used to label, categorize, or organize a list of items.
To display a badge, use the class a-badge.
A contextual class (e.g. -dark) can also be applied to provide alternate styling.
<!-- For light backgrounds -->
<div class="a-badge">
<span>Base</span>
</div>
<div class="a-badge -primary">
<span>Primary</span>
</div>
<div class="a-badge -success">
<span>Success</span>
</div>
<div class="a-badge -warning">
<span>Warning</span>
</div>
<div class="a-badge -danger">
<span>Danger</span>
</div>
<div class="a-badge -dark">
<span>Dark</span>
</div>
<div class="a-badge -muted">
<span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="a-badge -secondary">
<span>Secondary</span>
</div>
<div class="a-badge -light">
<span>Light</span>
</div>
<!-- For light backgrounds -->
<div class="a-badge -primary -outline">
<span>Primary</span>
</div>
<div class="a-badge -success -outline">
<span>Success</span>
</div>
<div class="a-badge -danger -outline">
<span>Danger</span>
</div>
<div class="a-badge -dark -outline">
<span>Dark</span>
</div>
<div class="a-badge -muted -outline">
<span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="a-badge -secondary -outline">
<span>Secondary</span>
</div>
<div class="a-badge -light -outline">
<span>Light</span>
</div>
<!-- For light backgrounds -->
<div class="a-badge -primary -flat">
<span>Primary</span>
</div>
<div class="a-badge -success -flat">
<span>Success</span>
</div>
<div class="a-badge -warning -flat">
<span>Warning</span>
</div>
<div class="a-badge -danger -flat">
<span>Danger</span>
</div>
<div class="a-badge -dark -flat">
<span>Dark</span>
</div>
<div class="a-badge -muted -flat">
<span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="a-badge -secondary -flat">
<span>Secondary</span>
</div>
<div class="a-badge -light -flat">
<span>Light</span>
</div>
Use the -pill modifier class to render badges with a more pronounced border-radius.
<div class="a-badge -pill">
<span>Badge</span>
</div>
Icons can be placed before, after, or on both sides of text.
<div class="a-badge">
<div class="a-badge__content">
<i class="a-icon -xs icon-plus"></i>
<span>Badge</span>
</div>
</div>
<div class="a-badge">
<div class="a-badge__content">
<span>Badge</span>
<i class="a-icon -xs icon-x"></i>
</div>
</div>
<div class="a-badge -flat -success">
<div class="a-badge__content">
<i class="a-icon icon-circle"></i>
<span>Active</span>
</div>
</div>
<div class="a-badge -flat -warning">
<div class="a-badge__content">
<i class="a-icon icon-circle-clock"></i>
<span>Away</span>
</div>
</div>
<div class="a-badge -flat -danger">
<div class="a-badge__content">
<i class="a-icon icon-circle-minus"></i>
<span>Do not disturb</span>
</div>
</div>
<div class="a-badge -flat -muted">
<div class="a-badge__content">
<i class="a-icon icon-circle"></i>
<span>Offline</span>
</div>
</div>
Use the -small modifier class to render small badges.
<div class="a-badge -small">
<span>Badge</span>
</div>
<div class="a-badge -flat -small">
<div class="a-badge__content">
<i class="a-icon icon-atom"></i>
<span>Badge</span>
</div>
</div>Use the -smaller modifier class to render even smaller badges.
<div class="a-badge -smaller">
<span>Badge</span>
</div>
<div class="a-badge -flat -smaller">
<div class="a-badge__content">
<i class="a-icon icon-atom"></i>
<span>Badge</span>
</div>
</div>Use the -text--uppercase text utility class to render badges in all uppercase. -text--lowercase and -text--capitalized are also supported.
<div class="a-badge -text--uppercase">
<span>Badge</span>
</div>