Label

Ready Added in 2.0.0

Indicate important notes and highlight parts of your content.

Usage

To create a label, just add the .gls-label class to a <span> element.

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

Default
```
<span class="gls-label">Default</span>
```

Guidelines

When to use

To label new content on a page
To help users discover important information changes in your UI

When to consider something else

When there is a critical error that requires the users attention to fix, use a page-level alert instead
Avoid using lots of badges on one page when possible as it will diminish the affect of calling out important parts of the UI

Badges are visual indicators that the information is important, but visual cues are insufficient for those using assistive technologies, such as screen readers. The colors of the badge alone will not be enough to convey meaning to screen readers. Use the .sr-only utility class to add sufficient information with the text of the badge. Adding additional text to the badge and visually hiding the additional text is a good user experience.

Style modifiers

Add one of the following classes for additional styles.

Class	Description
`.gls-label-primary`	Indicates an important message.
`.gls-label-secondary`	Indicates an important message.
`.gls-label-tertiary`	Indicates a less important message.
`.gls-label-info`	Indicates an informational message.
`.gls-label-success`	Indicates success or a positive message.
`.gls-label-warning`	Indicates a warning.
`.gls-label-danger`	Indicates an error or important message.

<span class="gls-label gls-label-success"></span>

Default Primary Secondary Tertiary Info Success Warning Danger

<span class="gls-label">Default</span>

<span class="gls-label gls-label-primary">Primary</span>

<span class="gls-label gls-label-secondary">Secondary</span>

<span class="gls-label gls-label-tertiary">Tertiary</span>

<span class="gls-label gls-label-info">Info</span>

<span class="gls-label gls-label-success">Success</span>

<span class="gls-label gls-label-warning">Warning</span>

<span class="gls-label gls-label-danger">Danger</span>