Spectrum Components API

Schema version: 6.0.0

Status light

Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.

PropertyValuesDefault valueRequired
label
text
-
variant
informative / neutral / positive / notice / negative / indigo / celery / chartreuse / yellow / magenta / fuchsia / purple / seafoam / pink / turquoise / cinnamon / brown / silver / gray / red / orange / green / cyan
informative
size
s / m / l / xl
m
{
  "slug": "status-light",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/status-light.json",
  "title": "Status light",
  "description": "Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.",
  "meta": {
    "category": "status",
    "documentationUrl": "https://spectrum.adobe.com/page/status-light/"
  },
  "type": "object",
  "properties": {
    "label": {
      "type": "string"
    },
    "variant": {
      "type": "string",
      "enum": [
        "informative",
        "neutral",
        "positive",
        "notice",
        "negative",
        "indigo",
        "celery",
        "chartreuse",
        "yellow",
        "magenta",
        "fuchsia",
        "purple",
        "seafoam",
        "pink",
        "turquoise",
        "cinnamon",
        "brown",
        "silver",
        "gray",
        "red",
        "orange",
        "green",
        "cyan"
      ],
      "default": "informative"
    },
    "size": {
      "type": "string",
      "enum": [
        "s",
        "m",
        "l",
        "xl"
      ],
      "default": "m"
    }
  },
  "required": [
    "label"
  ]
}
← Back to home