9.1 Labels

A basic UI component, which brings attention to discrete pieces of informations (eg: tags). They are usually linked to a main content, and do not stand on their own. Generally employed on a <span>

You can change the color background with the label-<color> classes. You can customize the list of colors available you need by changing the @label-colorslist variables in the small-ui/variable.less file.

• default

  A default vanilla label

  Label
• label-gold

  Label with a gold color

  Label

<span class="label {$modifiers}">Label</button>

9.1.1 Size

You can change the size of any label by adding these class. The font size is proportional to the parent (a label inside a h1 wont have the same size as inside a small balise)

• .label-sm

  A small button

  Large Label Normal Label Small Label
• .label-md

  A medium button (default value, this class is optional)

  Large Label Normal Label Small Label
• .label-lg

  A large button

  Large Label Normal Label Small Label

<span class="label-pool {$modifiers}">Large Label</span>
<span class="label-pool {$modifiers}">Normal Label</span>
<span class="label-pool {$modifiers}">Small Label</span>

9.1.2 Icons

Of course, labels can also contains icons

• Accept Voyageur Delete

<button class="label"><span class="icon-tick"></span>Accept</button>
<button class="label-pool"><span class="icon-user"></span> Voyageur</button>
<button class="btn btn-tertiary"><span class="icon icon-bin"></span>Delete</button>

9.1.4 Buttons inside label

The label-btn is for button inside label. The button is tertiary style.

• I'm a label with a Button ! Yay. Also in the right

<span class="label">I'm a label with a <button class="label-btn">Button !</button> Yay. </span>
<span class="label-lg"> <button class="label-btn-right">Also in the right</button></span>