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

Status Light

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/statuslight@3.0.3-alpha.1
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Sizing
Verified

S

Small

M (default)

Medium

L

Large

XL

Extra Large
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--info">Small</div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <div class="spectrum-StatusLight spectrum-StatusLight--sizeM spectrum-StatusLight--info">Medium</div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <div class="spectrum-StatusLight spectrum-StatusLight--sizeL spectrum-StatusLight--info">Large</div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <div class="spectrum-StatusLight spectrum-StatusLight--sizeXL spectrum-StatusLight--info">Extra Large</div>
  </div>
</div>

Colors
Verified

Celery Status
Yellow Status
Fuchsia Status
Indigo Status
Seafoam Status
Chartreuse Status
Magenta Status
Purple Status
Show markup
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--celery">Celery Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--yellow">Yellow Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--fuchsia">Fuchsia Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--indigo">Indigo Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--seafoam">Seafoam Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--chartreuse">Chartreuse Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--magenta">Magenta Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--purple">Purple Status</div>

Neutral
Verified

Paused
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--neutral">Paused</div>

Info
Verified

Active
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--info">Active</div>

Positive
Verified

Approved
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--positive">Approved</div>

Notice
Verified

Needs Approval
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--notice">Needs Approval</div>

Negative
Verified

Rejected
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--negative">Rejected</div>

Disabled
Verified

The disabled state of Status Light.

Disabled
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS is-disabled">Disabled</div>

Active
Deprecated

The active variant of Status Light

Use the info variant instead

Active
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--active">Active</div>

Migration Guide

T-shirt sizing

Status Light now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-StatusLight--size* class.

No results found

Try another search term.