Labels

Documentation and examples for label, our small count and labeling component.

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a label.

By default, label styles are pilled.

Primary Secondary Success Danger Warning Info Purple Light Dark White

            
              <span class="u-label u-label--primary">Primary</span>
              <span class="u-label u-label--secondary">Secondary</span>
              <span class="u-label u-label--success">Success</span>
              <span class="u-label u-label--danger">Danger</span>
              <span class="u-label u-label--warning">Warning</span>
              <span class="u-label u-label--info">Info</span>
              <span class="u-label u-label--purple">Purple</span>
              <span class="u-label u-label--light">Light</span>
              <span class="u-label u-label--dark">Dark</span>
              <span class="u-label u-label--white">White</span>

Links

Using the contextual .u-label-* classes on an <a> element quickly provide actionable labels with hover and focus states.

Primary Secondary Success Danger Warning Info Light Dark White

            
              <a href="#" class="u-label u-label--primary">Primary</a>
              <a href="#" class="u-label u-label--secondary">Secondary</a>
              <a href="#" class="u-label u-label--success">Success</a>
              <a href="#" class="u-label u-label--danger">Danger</a>
              <a href="#" class="u-label u-label--warning">Warning</a>
              <a href="#" class="u-label u-label--info">Info</a>
              <a href="#" class="u-label u-label--light">Light</a>
              <a href="#" class="u-label u-label--dark">Dark</a>
              <a href="#" class="u-label u-label--white">White</a>

Sizes

Add .u-label--sm or .u-label--xs for additional sizes.

Medium size Medium size

            
              <a href="#" class="u-label u-label--primary">Medium size</a>
              <a href="#" class="u-label u-label--secondary">Medium size</a>

Small size Small size

            
              <a href="#" class="u-label u-label--sm u-label--primary">Small size</a>
              <a href="#" class="u-label u-label--sm u-label--secondary">Small size</a>

Extra small size Extra small size

            
              <a href="#" class="u-label u-label--xs u-label--primary">Extra small size</a>
              <a href="#" class="u-label u-label--xs u-label--secondary">Extra small size</a>

Important

Space does not include all classes, but includes only used classes to reduce the size of CSS files. However, you can add more sizes by adding entries to the Sass map variable via: assets/include/scss/base/label/.