Labels
a11y ready
The coloring of the label text is done by comparing contrast of a given color in the YIQ color space to the light/dark arguments and returns whichever is most “contrasty”
default
success
warning
error
primary
secondary
<span class="label">default</span>
<span class="label label--success">success</span>
<span class="label label--warning">warning</span>
<span class="label label--error">error</span>
<span class="label label--primary">primary</span>
<span class="label label--secondary">secondary</span>Outline style
default
success
warning
error
primary
secondary
<span class="label label--outline">default</span>
<span class="label label--success label--outline">success</span>
<span class="label label--warning label--outline">warning</span>
<span class="label label--error label--outline">error</span>
<span class="label label--primary label--outline">primary</span>
<span class="label label--secondary label--outline">secondary</span>Links
Using the .label classes with the <a> element quickly provide actionable badges with hover and focus states.
<a href="#" class="label">default</a>
<a href="#" class="label label--success">success</a>
<a href="#" class="label label--warning">warning</a>
<a href="#" class="label label--error">error</a>
<a href="#" class="label label--outline">default</a>
<a href="#" class="label label--success label--outline">success</a>
<a href="#" class="label label--warning label--outline">warning</a>
<a href="#" class="label label--error label--outline">error</a>More colours
<span class="label label--coolblue">cool blue</span>
<span class="label label--duskblue">dusk blue</span>
<span class="label label--lightbluegrey">light blue grey</span>
<span class="label label--slate">slate</span>
<span class="label label--dark">dark</span>
<span class="label label--warmgrey">warm grey</span>
<span class="label label--lightishpurple">lightish purple</span>
<span class="label label--cornflower">cornflower</span>
<span class="label label--lightteal">light teal</span>
<span class="label label--sunyellow">sun yellow</span>
<span class="label label--apricot">apricot</span>
<span class="label label--lightsalmon">light salmon</span>
<span class="label label--facebook">facebook</span>
<span class="label label--twitter">twitter</span>
<span class="label label--instagram">instagram</span>
<span class="label label--youtube">youtube</span>
<span class="label label--spotify">spotify</span>
<span class="label label--soundcloud">soundcloud</span>