Label

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

Basic usage

The .ms-label class allows you to set up a label.

Live Editor

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

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

Result

label

To adapt your button to your content, several colors are available.

Live Editor

<div> <div class="ms-label ms-primary">label</div> <div class="ms-label ms-secondary">label</div> <div class="ms-label ms-action">label</div> <div class="ms-label ms-action2">label</div> </div>

<div>
    <div class="ms-label ms-primary">label</div>
    <div class="ms-label ms-secondary">label</div>
    <div class="ms-label ms-action">label</div>
    <div class="ms-label ms-action2">label</div>
</div>

Result

label

label

label

label

Close

A cross can be added via the class .ms-close, it will be positioned on the top right corner.

Live Editor

<div class="ms-label ms-action2">label <span class="ms-close"></span></div>

<div class="ms-label ms-action2">label <span class="ms-close"></span></div>

Result

label

Sizes

In order to adapt the label to your content, it is possible to display them in different sizes with classes .ms-small, .ms-medium and .ms-large.

Live Editor

<div> <div class="ms-label ms-small">label</div> <div class="ms-label">label</div> <div class="ms-label ms-medium">label</div> <div class="ms-label ms-large">label</div> </div>

<div>
    <div class="ms-label ms-small">label</div>
    <div class="ms-label">label</div>
    <div class="ms-label ms-medium">label</div>
    <div class="ms-label ms-large">label</div>
</div>

Result

label

label

label

label

Light labels

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

Live Editor

<div> <div class="ms-label ms-primary ms-light">label</div> <div class="ms-label ms-secondary ms-light">label</div> <div class="ms-label ms-action ms-light">label</div> <div class="ms-label ms-action2 ms-light">label</div> </div>

<div>
    <div class="ms-label ms-primary ms-light">label</div>
    <div class="ms-label ms-secondary ms-light">label</div>
    <div class="ms-label ms-action ms-light">label</div>
    <div class="ms-label ms-action2 ms-light">label</div>
</div>

Result

label

label

label

label

Border

Labels can get a border with the .ms-border class.

Live Editor

<div> <div class="ms-label ms-border ms-primary">label</div> <div class="ms-label ms-border ms-secondary">label</div> <div class="ms-label ms-border ms-action">label</div> <div class="ms-label ms-border ms-action2">label</div> </div>

<div>
    <div class="ms-label ms-border ms-primary">label</div>
    <div class="ms-label ms-border ms-secondary">label</div>
    <div class="ms-label ms-border ms-action">label</div>
    <div class="ms-label ms-border ms-action2">label</div>
</div>

Result

label

label

label

label