Skip to main content

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>
            
          

Sizes

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

            
              <a href="#" class="u-label u-label--primary">Medium size</a>
              <a href="#" class="u-label u-label--secondary">Medium size</a>
            
          
            
              <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>
            
          
            
              <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/.