Label

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/label@2.0.0

Variants#


Standard#
Contribution

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
<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>
Show markup

Activity labels#
Contribution

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

Small#
Contribution

A small label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
<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>
Show markup

Large#
Contribution

A large label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
<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>
Show markup