Skip to main content

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 Label
Something <span class="bsk-label bsk-label-default">Label</span>

Primary label

Add the .bsk-label-primary class for a primary label.

Something Label
Something <span class="bsk-label bsk-label-primary">Label</span>

Experimental label

Add the .bsk-label-experimental class for an experimental label.

Something 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
Success label Warning label Dangerous label Info label
<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
Backlog label Discovery label Alpha label Beta label Live phase Retired phase
<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.

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