{
  "title": "Status",
  "path": "/components/status",
  "url": "https://design.werklist.com/components/status",
  "text": "https://design.werklist.com/agent/components/status",
  "summary": "Shows the value of a status field, such as Documents missing or Visa approved, as a word on a colored fill.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Status",
  "purpose": "Shows the value of a status field or the state of a record as a word on a colored fill.",
  "use": [
    "The value of a status column in a board cell or on a card, such as Visa approved (solid).",
    "The state of a record beside a name or in a notification, such as Interview booked (quiet)."
  ],
  "avoid": [
    "New, Beta, Pro or any label that holds no value.",
    "Labels on navigation or marketing pages.",
    "Values a person picked from a list, such as the skills of a candidate: use Combobox with several choices.",
    "A dot or a fill without its word."
  ],
  "variants": [
    {
      "name": "solid",
      "use": "The value of a status field in a board and on a card."
    },
    {
      "name": "quiet",
      "use": "A state named beside a title or inside a message, such as the stage of a candidate in a notification."
    }
  ],
  "anatomy": [
    {
      "part": "Solid label",
      "measure": "13 px, weight 500, line height 1, centered, white",
      "token": "--on-brand"
    },
    {
      "part": "Solid padding",
      "measure": "8 px on every side",
      "token": "--space-2"
    },
    {
      "part": "Solid inset in a cell",
      "measure": "6 px on each side"
    },
    {
      "part": "Solid radius",
      "measure": "9 px"
    },
    {
      "part": "Solid height",
      "measure": "29 px in a board row, 36 px with a 12 px label on a phone card"
    },
    {
      "part": "Solid fill",
      "measure": "a color from the status palette, the same in both themes, under white words"
    },
    {
      "part": "Empty",
      "measure": "a hyphen on gray #848991"
    },
    {
      "part": "Quiet label",
      "measure": "11 px, line height 1, weight 500"
    },
    {
      "part": "Quiet padding",
      "measure": "2 px above and below, 8 px at the sides",
      "token": "--space-2"
    },
    {
      "part": "Quiet radius",
      "measure": "fully rounded",
      "token": "--radius-full"
    },
    {
      "part": "Quiet fill and ink",
      "measure": "--success, --warning, --error or --brand-blue at 15 percent, under --success-ink, --warning-ink, --error-ink or --brand-ink. Neutral is --surface-control under --text."
    }
  ],
  "accessibility": [
    "Plain text. The column header, or the title beside it, names the field.",
    "A status drawn as an icon carries its word as its name.",
    "No focus of its own. When it opens a picker, the cell is the button.",
    "In forced colors mode the fills drop and the word remains."
  ],
  "content": [
    "The value as the field holds it, in sentence case.",
    "An empty cell shows a hyphen. Where a word is needed it reads Empty, or Unassigned for a person."
  ],
  "tokens": [
    "--on-brand",
    "--success",
    "--success-ink",
    "--warning",
    "--warning-ink",
    "--error",
    "--error-ink",
    "--brand-blue",
    "--brand-ink",
    "--surface-control",
    "--text",
    "--radius-full",
    "--space-2"
  ],
  "rules": [
    "A label takes the status shape only when it shows a value held in a field or a record.",
    "Navigation and marketing pages carry no status.",
    "Every fill carries white words, and one value keeps one color on every board.",
    "The word is always present, written as the field holds it, in sentence case."
  ]
}