Labels · minstlye.io

Labels allow you to display highlighted text. These are available in different sizes, shapes and colors.

This is a label

<span class="ms-label">label</span>

To display a status, you can also change the color of the label.

label label label label

<span class="ms-label ms-info">label</span>
<span class="ms-label ms-success">label</span>
<span class="ms-label ms-danger">label</span>
<span class="ms-label ms-warning">label</span>

Light labels

Labels can also have a more discret background, using the ms-outline-** classe.

label label label label

<span class="ms-label ms-outline-info">label</span>
<span class="ms-label ms-outline-success">label</span>
<span class="ms-label ms-outline-danger">label</span>
<span class="ms-label ms-outline-warning">label</span>

Sizes

The classes ms-small, ms-medium and ms-large allow you to modify the size of the label.

small default medium large

<span class="ms-label ms-small ms-outline-info">small</span>
<span class="ms-label">default</span>
<span class="ms-label ms-medium ms-success">medium</span>
<span class="ms-label ms-large ms-outline-danger">large</span>

Rounded

Add the ms-rounded class to have rounded labels.

rounded rounded

<span class="ms-label ms-outline-success ms-rounded">rounded</span>
<span class="ms-label ms-info ms-rounded">rounded</span>