New This website is new, your feedback will help us to improve it.

Label

Overview

Use a .bsk-label-<*> class to highlight something, such as a status or some other property.

If you are highlighting a number, Badges can also be used.

Variants

Default label

Use the .bsk-label-default class for a standard label. For added context you can use contextual colours instead.

Something Label

Something <span class="text-sm bsk-label-default">Label</span>

Primary label

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

Something Label

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

Experimental label

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

Something Label

Something <span class="text-sm 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 text-sm">Success label</span>
<span class="bsk-label bsk-label-warning text-sm">Warning label</span>
<span class="bsk-label bsk-label-danger text-sm">Dangerous label</span>
<span class="bsk-label bsk-label-info text-sm">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

Set the size of labels by altering the size of the label text

Label Label Label

<span class="bsk-label bsk-label-default text-xl">Label</span>
<span class="bsk-label bsk-label-default">Label</span>
<span class="bsk-label bsk-label-default text-sm">Label</span>