# 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.

LabelOutline LabelUnderline LabelGray Out LabelInverted Label

LabelDefault

    <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.

LabelOutline LabelUnderline LabelGray Out LabelInverted Label

LabelSmall

    <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>

### Related Tokens

These tokens are automatically mapped to this page by token prefix.

| Token | 1-bit | 2-bit | Density 2x | 4/8/16-bit |
| --- | --- | --- | --- | --- |
| Base | | | | |
| `--label-font-family` | "NicoClean" | "NicoClean" | "Inter Variable", Inter | — |
| `--label-font-size` | 16px | 16px | calc(16px * var(--ui-scale)) | — |
| `--label-font-smoothing` | none | none | auto | — |
| `--label-font-weight` | 400 | 400 | 500 | — |
| `--label-line-height` | 1.25 | 1.25 | 1.25 | — |
| Small | | | | |
| `--label-small-font-family` | "NicoPups" | "NicoPups" | "Inter Variable", Inter | — |
| `--label-small-font-size` | 16px | 16px | calc(13px * var(--ui-scale)) | — |
| `--label-small-font-smoothing` | none | none | auto | — |
| `--label-small-font-weight` | 400 | 400 | 500 | — |
| `--label-small-line-height` | 1 | 1 | 1 | — |
| Large | | | | |
| `--label-large-font-family` | "Inter Variable", Inter | — | "Inter Variable", Inter | — |
| `--label-large-font-size` | 21px | — | calc(21px * var(--ui-scale)) | — |
| `--label-large-font-smoothing` | auto | — | auto | — |
| `--label-large-font-weight` | 500 | — | 500 | — |
| `--label-large-line-height` | 1.2 | — | 1.2 | — |
| Xlarge | | | | |
| `--label-xlarge-font-family` | "Inter Variable", Inter | — | "Inter Variable", Inter | — |
| `--label-xlarge-font-size` | 26px | — | calc(26px * var(--ui-scale)) | — |
| `--label-xlarge-font-smoothing` | auto | — | auto | — |
| `--label-xlarge-font-weight` | 475 | — | 475 | — |
| `--label-xlarge-line-height` | 1.2 | — | 1.2 | — |
| Xxlarge | | | | |
| `--label-xxlarge-font-family` | "Inter Variable", Inter | — | "Inter Variable", Inter | — |
| `--label-xxlarge-font-size` | 30px | — | calc(30px * var(--ui-scale)) | — |
| `--label-xxlarge-font-smoothing` | auto | — | auto | — |
| `--label-xxlarge-font-weight` | 450 | — | 450 | — |
| `--label-xxlarge-line-height` | 1.2 | — | 1.2 | — |

Previous

[Value Display data values with consistent formatting](/framework/docs/1.2/value)

Next

[Description Format descriptive text with standardized styles](/framework/docs/1.2/description)