Label

HTML

Use a label when you want to classify content or data. It is often used as simple visual cue, but can also have interactive properties and act as a button (example: tags, that can be removed from a list).

The Label component is an inline-block element meant to be used inline along elements such as text, buttons and forms. It's width is defined by the lenght of content that's passed inside.

Basic

  • Basic
  • Primary Secondary
HTML
    <span class="label">Basic</span>

<span class="label label--{color}">Primary</span>
  

With an icon

  • More
  • Add Skip
HTML
    <span class="label">More <i class="icon-{icon}"></i></span>

<span class="label label--{color}">Add <i class="icon-{icon}"></i></span>
  

Dismissible

Dismissible
HTML
    <span class="label label--dismiss">Dismissible <i class="icon-x"></i></span>
  

Small

Small
HTML
    <span class="label label--small">Small</span>
  

Pill

HTML
    <span class="label label--{color} label--pill"></span>
  

Dot

HTML
    <span class="label label--{color} label--dot"></span>
  

Usage

Attribute Description Possible values Type Required Default
size Set with .label--{size} class small, pill, dot String - -
color Set with .label--{color} class See Colors page String - -
icon Add an icon to a label like .icon-{icon-name} See Icons page String - -
dismiss Set with .label--dissmis. It only adds hover style to icon. dismiss string - -