# Status

Shows the value of a status field or the state of a record as a word on a colored fill.

* Kind: component
* Page: https://design.werklist.com/components/status
* Version: 2.1.2

## When to use it

* 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).

## When not to use it

* 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.

## 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.

## Anatomy

* Solid label: 13 px, weight 500, line height 1, centered, white (--on-brand)
* Solid padding: 8 px on every side (--space-2)
* Solid inset in a cell: 6 px on each side
* Solid radius: 9 px
* Solid height: 29 px in a board row, 36 px with a 12 px label on a phone card
* Solid fill: a color from the status palette, the same in both themes, under white words
* Empty: a hyphen on gray #848991
* Quiet label: 11 px, line height 1, weight 500
* Quiet padding: 2 px above and below, 8 px at the sides (--space-2)
* Quiet radius: fully rounded (--radius-full)
* Quiet fill and ink: --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.

## Variants

* solid: The value of a status field in a board and on a card.
* quiet: A state named beside a title or inside a message, such as the stage of a candidate in a notification.

## 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