• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Label

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/label@2.0.8-beta.1

Variants


Standard
Contribution

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show markup
<span class="spectrum-Label spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--fuchsia">Fuchsia Label</span>

Activity labels
Contribution

Active Inactive
Show markup
<span class="spectrum-Label spectrum-Label--active">Active</span>
<span class="spectrum-Label spectrum-Label--inactive">Inactive</span>

Small
Contribution

A small label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show markup
<span class="spectrum-Label spectrum-Label--small spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--fuchsia">Fuchsia Label</span>

Large
Contribution

A large label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show markup
<span class="spectrum-Label spectrum-Label--large spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--fuchsia">Fuchsia Label</span>