# Label

This component highlights an important note.

## Usage

To create a label, add the ```.label``` class to a ```<span>``` element.

<div class="docs-demo">
    <span class="label">Label</span>
</div>

```html
<span class="label">Label</span>
```

-----------

## Shapes

Default style applies a slightly rounded label border style. You can apply two other label shape styles.

| Class | Description |
| ------ | ------- |
| ```.label-squared``` | Applies a square border style. |
| ```.label-rounded``` | Applies a rounded border style. |

<div class="docs-demo">
    <span class="label label-squared margin">squared</span>
    <span class="label label-rounded margin">rounded</span>
</div>

```html
<span class="label label-squared">Square</span>
<span class="label label-rounded">Rounded</span>
```

-----------

## Styles

You can apply different label styles. Simply add the class corresponding to the desired style.

| Class | Description |
| ------ | ------- |
| ```.label-secondary``` | Adds a secondary style. |
| ```.label-warning``` | Indicates a warning. |
| ```.label-danger``` | Indicates a error. |
| ```.label-success``` | Indicates a success. |

<div class="docs-demo">
    <span class="label label-secondary margin">secondary</span>
    <span class="label label-warning margin">warning</span>
    <span class="label label-danger margin">danger</span>
    <span class="label label-success margin">success</span>
</div>

```html
<span class="label label-secondary">Secondary</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-success">Success</span>
```

-----------