Labels
Labels allow you to display highlighted text. These are available in different sizes, shapes and colors.
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>