Label
Overview
Use the .bsk-label class to highlight something, such as a status or some other property.
You must pick a variant for each
label, otherwise it will look strange. It is not enough to use .bsk-label on its own.
If you are highlighting a number, Badges can also be used.
Variants
Default label
Add the .bsk-label-default class for a standard label. For added context you can use
contextual colours instead.
Something <span class="bsk-label bsk-label-default">Label</span>Primary label
Add the .bsk-label-primary class for a primary label.
Something <span class="bsk-label bsk-label-primary">Label</span>Experimental label
Add the .bsk-label-experimental class for an experimental label.
Something <span class="bsk-label bsk-label-experimental">Label</span>Contextual colours
The standard contextual colours can be used for context by adding these classes:
| Standard Context | Label Contextual Class |
|---|---|
| Success | .bsk-label-success |
| Warning | .bsk-label-warning |
| Danger | .bsk-label-danger |
| Info | .bsk-label-info |
<span class="bsk-label bsk-label-success">Success label</span>
<span class="bsk-label bsk-label-warning">Warning label</span>
<span class="bsk-label bsk-label-danger">Dangerous label</span>
<span class="bsk-label bsk-label-info">Info label</span>Development phases
The development phase colours can be used where relevant by adding these classes:
| Development Phase | Label Class |
|---|---|
| Backlog | .bsk-label-phase-backlog |
| Discovery | .bsk-label-phase-discovery |
| Alpha | .bsk-label-phase-alpha |
| Beta | .bsk-label-phase-beta |
| Live | .bsk-label-phase-live |
| Retired | .bsk-label-phase-retired |
<span class="bsk-label bsk-label-phase-backlog">Backlog label</span>
<span class="bsk-label bsk-label-phase-discovery">Discovery label</span>
<span class="bsk-label bsk-label-phase-alpha">Alpha label</span>
<span class="bsk-label bsk-label-phase-beta">Beta label</span>
<span class="bsk-label bsk-label-phase-live">Live phase</span>
<span class="bsk-label bsk-label-phase-retired">Retired phase</span>Sizes
Labels will scale with their parent element.
<div class="bsk-h1"><span class="bsk-label bsk-label-default">Label</span></div>
<div class="bsk-h2"><span class="bsk-label bsk-label-default">Label</span></div>
<div class="bsk-h3"><span class="bsk-label bsk-label-default">Label</span></div>This example uses header classes instead of elements to avoid issues with the automatic table of contents.