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
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
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>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | 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 | "Inter Variable", Inter |
--label-large-font-size
|
21px | 21px | calc(21px * var(--ui-scale)) |
--label-large-font-smoothing
|
auto | auto | auto |
--label-large-font-weight
|
500 | 500 | 500 |
--label-large-line-height
|
1.2 | 1.2 | 1.2 |
| Xlarge | |||
--label-xlarge-font-family
|
"Inter Variable", Inter | "Inter Variable", Inter | "Inter Variable", Inter |
--label-xlarge-font-size
|
26px | 26px | calc(26px * var(--ui-scale)) |
--label-xlarge-font-smoothing
|
auto | auto | auto |
--label-xlarge-font-weight
|
475 | 475 | 475 |
--label-xlarge-line-height
|
1.2 | 1.2 | 1.2 |
| Xxlarge | |||
--label-xxlarge-font-family
|
"Inter Variable", Inter | "Inter Variable", Inter | "Inter Variable", Inter |
--label-xxlarge-font-size
|
30px | 30px | calc(30px * var(--ui-scale)) |
--label-xxlarge-font-smoothing
|
auto | auto | auto |
--label-xxlarge-font-weight
|
450 | 450 | 450 |
--label-xxlarge-line-height
|
1.2 | 1.2 | 1.2 |