Label

The Label system provides various styles for displaying text labels, with options for different visual treatments and sizes. Labels can be used to highlight text, show status, or create visual hierarchy in your interface.

Label Variants

Labels come in several variants to suit different use cases. Each variant provides a distinct visual style while maintaining consistent spacing and sizing.

Default Labels

The base label styles and their variants provide different ways to present text, from solid backgrounds to outlined and underlined versions.

Label Outline Label Underline Label Gray Out Label Inverted Label

Label Default

<span class="label">Label</span>
<span class="label label--outline">Outline Label</span>
<span class="label label--underline">Underline Label</span>
<span class="label label--gray-out">Gray Out Label</span>
<span class="label label--inverted">Inverted Label</span>

Small Labels

Add the label--small class to create a more compact version of any label variant.

Label Outline Label Underline Label Gray Out Label Inverted Label

Label Small

<span class="label label--small">Label</span>
<span class="label label--small label--outline">Outline Label</span>
<span class="label label--small label--underline">Underline Label</span>
<span class="label label--small label--gray-out">Gray Out Label</span>
<span class="label label--small label--inverted">Inverted Label</span>