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. -danger) can also be applied to provide alternate styling.
<div class="a-badge">
<span>Base</span>
</div>
<div class="a-badge -primary">
<span>Primary</span>
</div>
<div class="a-badge -secondary">
<span>Secondary</span>
</div>
<div class="a-badge -danger">
<span>Danger</span>
</div>
<div class="a-badge -dark">
<span>Dark</span>
</div>
<div class="a-badge -light">
<span>Light</span>
</div><div class="a-badge -outline">
<span>Base</span>
</div>
<div class="a-badge -primary -outline">
<span>Primary</span>
</div>
<div class="a-badge -secondary -outline">
<span>Secondary</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 -light -outline">
<span>Light</span>
</div><div class="a-badge -flat">
<span>Base</span>
</div>
<div class="a-badge -primary -flat">
<span>Primary</span>
</div>
<div class="a-badge -secondary -flat">
<span>Secondary</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 -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>Base</span>
</div>
<div class="a-badge -primary -pill">
<span>Primary</span>
</div>
<div class="a-badge -secondary -pill">
<span>Secondary</span>
</div>
<div class="a-badge -danger -pill">
<span>Danger</span>
</div>
<div class="a-badge -dark -pill">
<span>Dark</span>
</div>
<div class="a-badge -light -pill">
<span>Light</span>
</div><div class="a-badge -pill -outline">
<span>Base</span>
</div>
<div class="a-badge -primary -pill -outline">
<span>Primary</span>
</div>
<div class="a-badge -secondary -pill -outline">
<span>Secondary</span>
</div>
<div class="a-badge -danger -pill -outline">
<span>Danger</span>
</div>
<div class="a-badge -dark -pill -outline">
<span>Dark</span>
</div>
<div class="a-badge -light -pill -outline">
<span>Light</span>
</div><div class="a-badge -flat">
<div class="a-badge__content">
<div class="a-icon">
<svg>
<use xlink:href="#icon-atom"></use>
</svg>
</div>
<span>Badge</span>
</div>
</div>
<div class="a-badge -flat">
<div class="a-badge__content">
<span>Badge</span>
<div class="a-icon">
<svg>
<use xlink:href="#icon-atom"></use>
</svg>
</div>
</div>
</div>
<div class="a-badge -flat">
<div class="a-badge__content">
<div class="a-icon">
<svg>
<use xlink:href="#icon-atom"></use>
</svg>
</div>
<span>Badge</span>
<div class="a-icon">
<svg>
<use xlink:href="#icon-atom"></use>
</svg>
</div>
</div>
</div>Use the -small modifier class to render small badges.
<div class="a-badge -small">
<span>Base</span>
</div>
<div class="a-badge -primary -small">
<span>Primary</span>
</div>
<div class="a-badge -secondary -small">
<span>Secondary</span>
</div>
<div class="a-badge -danger -small">
<span>Danger</span>
</div>
<div class="a-badge -dark -small">
<span>Dark</span>
</div>
<div class="a-badge -light -small">
<span>Light</span>
</div>
<div class="a-badge -flat -small">
<div class="a-badge__content">
<div class="a-icon">
<svg>
<use xlink:href="#icon-atom"></use>
</svg>
</div>
<span>Badge</span>
</div>
</div>Use the -smaller modifier class to render even smaller badges.
<div class="a-badge -smaller">
<span>Base</span>
</div>
<div class="a-badge -primary -smaller">
<span>Primary</span>
</div>
<div class="a-badge -secondary -smaller">
<span>Secondary</span>
</div>
<div class="a-badge -danger -smaller">
<span>Danger</span>
</div>
<div class="a-badge -dark -smaller">
<span>Dark</span>
</div>
<div class="a-badge -light -smaller">
<span>Light</span>
</div>
<div class="a-badge -flat -smaller">
<div class="a-badge__content">
<div class="a-icon">
<svg>
<use xlink:href="#icon-atom"></use>
</svg>
</div>
<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">
<span>Base</span>
</div>
<div class="a-badge -primary -text--uppercase">
<span>Primary</span>
</div>
<div class="a-badge -secondary -text--uppercase">
<span>Secondary</span>
</div>
<div class="a-badge -danger -text--uppercase">
<span>Danger</span>
</div>
<div class="a-badge -dark -text--uppercase">
<span>Dark</span>
</div>
<div class="a-badge -light -text--uppercase">
<span>Light</span>
</div>