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.

Label
Outline Label
Underline Label
Gray Out Label
Inverted Label
Label
Outline Label
Underline Label
Gray Out Label
Inverted Label
Label Variants 
<!-- Default Labels -->
<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 -->
<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>

Text Overflow Behavior

Labels can handle longer text content through natural wrapping or text clamping. Understanding how labels behave with overflow content helps ensure your interface remains readable and visually balanced.

Multi-line Wrapping

By default, labels will wrap to multiple lines when content exceeds the available width, maintaining readability for longer text.

This longer label will wrap to multiple lines when it exceeds the width
This longer label will wrap to multiple lines when it exceeds the width
This longer label will wrap to multiple lines when it exceeds the width
This longer label will wrap to multiple lines when it exceeds the width
This longer label will wrap to multiple lines when it exceeds the width
This longer label will wrap to multiple lines when it exceeds the width
Label Multi-line 
<!-- Labels with longer text will wrap naturally -->
<span class="label">This longer label will wrap to multiple lines when it exceeds the width</span>

Text Clamping

Use the framework's data-clamp attribute to limit labels to a specific number of lines with ellipsis overflow.

This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
This is a very long label text that would normally wrap to many lines but demonstrates how clamping behavior works with different variants and line limits to show ellipsis overflow
Label Clamped 
<!-- Single line clamping with data attribute -->
<span class="label" data-clamp="1">
  This text will be clamped to one line
</span>

<!-- Two line clamping -->
<span class="label" data-clamp="2">
  This text will be clamped to exactly two lines with ellipsis
</span>

Responsive Features

Label components support all three responsive systems: size-based, orientation-based, and bit-depth variants. This enables precise control over label appearance across different device configurations.

Size-Based Responsive

Apply different label variants at different screen sizes using breakpoint prefixes like md: and lg:.

Responsive Label Default → Outline (md) → Inverted (lg)
Progressive Styles Small → Outline (sm) → Underline (md)
Label Size Responsive 
<!-- Progressive label styling across screen sizes -->
<span class="label md:label--outline lg:label--inverted">
  Responsive Label
</span>

<!-- Multiple breakpoint combinations -->
<span class="label label--small sm:label--outline md:label--underline">
  Progressive Styles
</span>

Orientation-Based Responsive

Use portrait: prefix to apply different label styles when the screen is in portrait orientation.

Orientation Aware Outline (landscape) → Inverted (portrait)
Portrait Enhancement Plain → Underline (portrait)
Label Orientation Responsive 
<!-- Different styles for landscape vs portrait -->
<span class="label label--outline portrait:label--inverted">
  Orientation Aware
</span>

<!-- Portrait-only styling -->
<span class="label portrait:label--underline">
  Portrait Enhancement
</span>

Bit-Depth Responsive

Use bit-depth prefixes like 1bit:, 2bit:, and 4bit: to optimize label appearance for different display color capabilities.

Display Optimized Inverted (1bit) → Outline (2bit) → Underline (4bit)
Selective Styling Outline (1bit) → Gray-out (4bit)
Label Bit-Depth Responsive 
<!-- Different styles for different bit-depth displays -->
<span class="label 1bit:label--inverted 2bit:label--outline 4bit:label--underline">
  Display Optimized
</span>

<!-- Selective bit-depth targeting -->
<span class="label 1bit:label--outline 4bit:label--gray-out">
  Selective Styling
</span>

Combined Responsive Features

Combine multiple responsive systems for highly targeted label styling. Use size, orientation, and bit-depth modifiers together following the pattern: size:orientation:bit-depth:utility.

Advanced Targeting Complex responsive combinations
Multi-Condition Multiple responsive conditions
Label Combined Responsive 
<!-- Highly targeted responsive combinations -->
<span class="label md:portrait:2bit:label--inverted lg:4bit:label--outline">
  Advanced Targeting
</span>

<!-- Multiple responsive conditions -->
<span class="label sm:1bit:label--underline md:portrait:label--outline lg:4bit:label--gray-out">
  Multi-Condition
</span>

Value

Display data values with consistent formatting

Previous

Description

Format descriptive text with standardized styles

Next
Framework Index