• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Status light

Component status
Contribution
Last releasedFebruary 26, 2024
Current version@spectrum-css/statuslight@6.1.5

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>

Wrapping
Verified

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis tellus id interdum velit laoreet id donec ultrices tincidunt. Sollicitudin nibh sit amet commodo nulla facilisi. Auctor urna nunc id cursus. Sem viverra aliquet eget sit amet tellus cras adipiscing.
<div class="spectrum-StatusLight spectrum-StatusLight--sizeM spectrum-StatusLight--celery">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis tellus id interdum velit laoreet id donec ultrices tincidunt. Sollicitudin nibh sit amet commodo nulla facilisi. Auctor urna nunc id cursus. Sem viverra aliquet eget sit amet tellus cras adipiscing.</div>

Colors
Verified

Gray Status
Red Status
Orange Status
Yellow Status
Chartreuse Status
Celery Status
Green Status
Seafoam Status
Cyan Status
Blue Status
Indigo Status
Purple Status
Fuchsia Status
Magenta Status
Show markup
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--gray">Gray Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--red">Red Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--orange">Orange Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--yellow">Yellow Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--chartreuse">Chartreuse Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--celery">Celery Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--green">Green Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--seafoam">Seafoam Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--cyan">Cyan Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--blue">Blue Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--indigo">Indigo Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--purple">Purple Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--fuchsia">Fuchsia Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--magenta">Magenta Status</div>

Neutral
Verified

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

Accent
Verified

Accent
<div class="spectrum-StatusLight spectrum-StatusLight--sizeS spectrum-StatusLight--info">Accent</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>

Custom Properties API


This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

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.