1. Docs
  2. Components
  3. Badges
Buy Now Contact


Used as labels to hold small amounts of information or indicate a certain status.


<span class="c-badge c-badge--success">Badge</span>

Style Variations

Define badge’s style by using one the modifier classes: c-badge--success, c-badge--info, c-badge--danger, c-badge--primary, c-badge--warning or c-badge--secondary.

Badge Badge Badge Badge Badge Badge

<span class="c-badge c-badge--success">Badge</span>
<span class="c-badge c-badge--info">Badge</span>
<span class="c-badge c-badge--danger">Badge</span>
<span class="c-badge c-badge--primary">Badge</span>
<span class="c-badge c-badge--warning">Badge</span>
<span class="c-badge c-badge--secondary">Badge</span>

Size Variations

Define badge’s size by using one the modifier classes: c-badge--xsmall, c-badge--small.

Badge Badge Badge

<span class="c-badge c-badge--info c-badge--xsmall">Badge</span>
<span class="c-badge c-badge--info c-badge--small">Badge</span>
<span class="c-badge c-badge--info">Badge</span>