Default badge

Badge

<span class="badge">Badge</span>

Badge + primary colour

Badge

<span class="badge badge--primary">Badge</span>

Badge + secondary colour

Badge

<span class="badge badge--secondary">Badge</span>

Badge + success

Badge

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

Badge + alert

Badge

<span class="badge badge--alert">Badge</span>

Badge + info

Badge

<span class="badge badge--info">Badge</span>

Badge + light

Badge

<span class="badge badge--light">Badge</span>

Badge + dark

Badge

<span class="badge badge--dark">Badge</span>

Badge + rounded

Badge Badge Badge Badge Badge Badge Badge Badge

<span class="badge badge--pill">Badge</span>

<span class="badge badge--dark badge--pill">Badge</span>

<span class="badge badge--light badge--pill">Badge</span>

<span class="badge badge--info badge--pill">Badge</span>

<span class="badge badge--alert badge--pill">Badge</span>

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

<span class="badge badge--secondary badge--pill">Badge</span>

<span class="badge badge--primary badge--pill">Badge</span>
            

Badge as link

Badge Badge Badge Badge Badge Badge Badge Badge

<a href="#" class="badge badge--pill">Badge</a>

<a href="#" class="badge badge--dark badge--pill">Badge</a>

<a href="#" class="badge badge--light badge--pill">Badge</a>

<a href="#" class="badge badge--info badge--pill">Badge</a>

<a href="#" class="badge badge--alert badge--pill">Badge</a>

<a href="#" class="badge badge--success badge--pill">Badge</a>

<a href="#" class="badge badge--secondary badge--pill">Badge</a>

<a href="#" class="badge badge--primary badge--pill">Badge</a>

Badge + round

Use for numbers or single small icons

10

<span class="badge badge--primary badge--round">Badge</span>

 

favorite

              <span class="badge badge--primary badge--round">
                <i class="material-icons">favorite</i>
              </span>

Badge + icon + text

delete_outline Badge

              <a href="#" class="badge badge--dark badge--pill badge--icon-text">Badge<
              <i class="material-icons">delete_outline</i>
              </a>
            

 

Badge favorite

              <span class="badge badge--primary badge--icon-text">
                Badge
                <i class="material-icons">favorite</i>
              </span>