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
Dark
Light
<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>

Outline

Base
Brand
Success
Danger
Info
Dark
Light
<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>

Flat

Base
Brand
Success
Danger
Info
Dark
Light
<div class="a-badge -outline">
  <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>

Pills

Use the -pill modifier class to render badges with a more pronounced border-radius.

Base

Base
Brand
Success
Danger
Info
Dark
Light
<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>

Outline

Base
Brand
Success
Danger
Info
Dark
Light
<div class="a-badge -pill">
  <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>

Additional Sizes

Small

Use the -small modifier class to render small badges.

Base
Brand
Success
Danger
Info
Dark
Light
<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>

Smaller

Use the -smaller modifier class to render even smaller badges.

Base
Brand
Success
Danger
Info
Dark
Light
<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>

Text Transform

Uppercase

Use the -textUppercase text utility class to render badges in all uppercase. -textLowercase and -textCapitalized are also supported.

Base
Brand
Success
Danger
Info
Dark
Light
<div class="a-badge">
  <span>Base</span>
</div>
<div class="a-badge -brand -textUppercase">
  <span>Brand</span>
</div>
<div class="a-badge -success -textUppercase">
  <span>Success</span>
</div>
<div class="a-badge -danger -textUppercase">
  <span>Danger</span>
</div>
<div class="a-badge -info -textUppercase">
  <span>Info</span>
</div>
<div class="a-badge -dark -textUppercase">
  <span>Dark</span>
</div>
<div class="a-badge -light -textUppercase">
  <span>Light</span>
</div>