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

Label

Component status
Contribution
Last releasedApril 15, 2021
Current version@spectrum-css/label@2.0.10
View guidelines
Spectrum website
View repository
GitHub
View package
npm

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>

No results found

Try another search term.