Status Light

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

Variants#


Colors#
Verified

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

Neutral#
Verified

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

Info#
Verified

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

Positive#
Verified

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

Notice#
Verified

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

Negative#
Verified

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

Disabled#
Verified

The disabled state of Status Light.

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

Active#
Deprecated

The active variant of Status Light

Use the info variant instead

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