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 -brand">
<span>Brand</span>
</div>
<div class="a-badge -success">
<span>Success</span>
</div>
<div class="a-badge -danger">
<span>Danger</span>
</div>
<div class="a-badge -info">
<span>Info</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 -brand -outline">
<span>Brand</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 -info -outline">
<span>Info</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 -brand -flat">
<span>Brand</span>
</div>
<div class="a-badge -success -flat">
<span>Success</span>
</div>
<div class="a-badge -danger -flat">
<span>Danger</span>
</div>
<div class="a-badge -info -flat">
<span>Info</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 -brand -pill">
<span>Brand</span>
</div>
<div class="a-badge -success -pill">
<span>Success</span>
</div>
<div class="a-badge -danger -pill">
<span>Danger</span>
</div>
<div class="a-badge -info -pill">
<span>Info</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 -brand -pill -outline">
<span>Brand</span>
</div>
<div class="a-badge -success -pill -outline">
<span>Success</span>
</div>
<div class="a-badge -danger -pill -outline">
<span>Danger</span>
</div>
<div class="a-badge -info -pill -outline">
<span>Info</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 -brand -small">
<span>Brand</span>
</div>
<div class="a-badge -success -small">
<span>Success</span>
</div>
<div class="a-badge -danger -small">
<span>Danger</span>
</div>
<div class="a-badge -info -small">
<span>Info</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 -brand -smaller">
<span>Brand</span>
</div>
<div class="a-badge -success -smaller">
<span>Success</span>
</div>
<div class="a-badge -danger -smaller">
<span>Danger</span>
</div>
<div class="a-badge -info -smaller">
<span>Info</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 -brand -text--uppercase">
<span>Brand</span>
</div>
<div class="a-badge -success -text--uppercase">
<span>Success</span>
</div>
<div class="a-badge -danger -text--uppercase">
<span>Danger</span>
</div>
<div class="a-badge -info -text--uppercase">
<span>Info</span>
</div>
<div class="a-badge -dark -text--uppercase">
<span>Dark</span>
</div>
<div class="a-badge -light -text--uppercase">
<span>Light</span>
</div>