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.
<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.
<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/
.