Chi Documentation
Badges
Badges are inline elements used to label, categorize, or organize a list of items.
Examples
To display a badge, use the class a-badge.
A contextual class (e.g. -danger) can also be applied to provide alternate styling.
Base
Base
brand
success
danger
info
light
dark
<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 -light">
<span>light</span>
</div>
<div class="a-badge -dark">
<span>dark</span>
</div>
Outline
Base
brand
success
danger
info
light
dark
<div class="a-badge -outline">
<span>base</span>
</div>
<div class="a-badge -outline -brand">
<span>brand</span>
</div>
<div class="a-badge -outline -success">
<span>success</span>
</div>
<div class="a-badge -outline -danger">
<span>danger</span>
</div>
<div class="a-badge -outline -info">
<span>info</span>
</div>
<div class="a-badge -outline -light">
<span>light</span>
</div>
<div class="a-badge -outline -dark">
<span>dark</span>
</div>
Flat
Base
brand
success
danger
info
light
dark
<div class="a-badge -flat">
<span>base</span>
</div>
<div class="a-badge -flat -brand">
<span>brand</span>
</div>
<div class="a-badge -flat -success">
<span>success</span>
</div>
<div class="a-badge -flat -danger">
<span>danger</span>
</div>
<div class="a-badge -flat -info">
<span>info</span>
</div>
<div class="a-badge -flat -light">
<span>light</span>
</div>
<div class="a-badge -flat -dark">
<span>dark</span>
</div>
Pills
Use the -pill modifier class to render badges with a more pronounced border-radius.
Base
Base
brand
success
danger
info
light
dark
<div class="a-badge -pill">
<span>base</span>
</div>
<div class="a-badge -pill -brand">
<span>brand</span>
</div>
<div class="a-badge -pill -success">
<span>success</span>
</div>
<div class="a-badge -pill -danger">
<span>danger</span>
</div>
<div class="a-badge -pill -info">
<span>info</span>
</div>
<div class="a-badge -pill -light">
<span>light</span>
</div>
<div class="a-badge -pill -dark">
<span>dark</span>
</div>
Outline
Base
brand
success
danger
info
light
dark
<div class="a-badge -pill -outline">
<span>base</span>
</div>
<div class="a-badge -pill -outline -brand">
<span>brand</span>
</div>
<div class="a-badge -pill -outline -success">
<span>success</span>
</div>
<div class="a-badge -pill -outline -danger">
<span>danger</span>
</div>
<div class="a-badge -pill -outline -info">
<span>info</span>
</div>
<div class="a-badge -pill -outline -light">
<span>light</span>
</div>
<div class="a-badge -pill -outline -dark">
<span>dark</span>
</div>