# StatusPill

A live state, named: a dot plus an uppercase mono label.

- Group: Display
- Import: `import { StatusPill } from '@misoto22/folio'`
- Page: https://ui.misoto22.com/components/status-pill/
- Related: status-dot, badge

## Anatomy

- **Pill** (required) — The outlined <span>: --radius-pill, a --rule-2 hairline, --paper ground, and deliberately uneven padding — 10px before the dot, 12px after the label — so the pair sits optically centred rather than mathematically.
- **Dot** (required) — A StatusDot handed tone and pulse. It is aria-hidden, so it is not where the tone reaches a reader who cannot see it.
- **Label** (required) — children in the eyebrow idiom — 11px uppercase mono, tracking pulled back from 0.2em to 0.12em because a pill is a shorter run than a section kicker.
- **Severity** — A visually-hidden “Warning” or “Error” at the warning and danger tones, so those two reach a reader through something other than a colour on a hidden dot. success and neutral add nothing: they are the absence of alarm, which is what a reader already assumes.

## Best practices

### Do

- Put the state in the words anyway. The severity word reaches a screen reader and nothing else — the pill’s own text is --ink-2 at every tone, so on a monochrome screen “Degraded” in a warning pill and in a neutral one are still the same pill.
- Set pulse={false} once the state has settled — the default halo means “right now”, and an archived or shipped pill pulsing forever tells the reader something is live when nothing is.
- Take the whole pill rather than composing a dot and a span at the call site: that assembly is how the same “available for work” chip came out at three dot sizes and two pulse timings on one site.

### Don’t

- It is not a live region. The pill is a plain <span>, so a state flipping from Available to Degraded while the reader is on the page changes silently — if the change is the news, the call site owns the role="status" around it.
- One per view, not one per row. The label is an uppercase eyebrow at 0.12em tracking — the loudest small type the system has — and a column of them down a table is Badge’s job, which is why Badge carries the same status tones in plain 12px mono.

## Accessibility

- The warning and danger tones are doubled by a visually-hidden severity word, because the dot that carries the colour is aria-hidden and has no name to give.
- success and neutral are silent on purpose: announcing “OK” before every settled pill is noise charged to the two tones worth interrupting for.
- Not a live region. A state that flips while the reader is on the page changes silently unless the call site owns a role="status" around it.

## StatusPill

A live state, named: a dot plus an uppercase mono label in an outlined pill. One component rather than a dot and a pill assembled per call site, which is how the same "available for work" chip ended up with three different dot sizes and two different pulse timings on one site. A warning or danger tone is doubled by a visually-hidden severity word, so the tone survives the dot being hidden. It does not survive monochrome: the pill's own text is `--ink-2` at every tone, and the state itself still belongs in the words the call site writes.

### Props

- `children` (required) — `ReactNode`.
- `tone` — `StatusTone` default `'success'`.
- `pulse` — `boolean` default `true`. Pulsing live dot (default) vs a settled one.

Also accepts: `HTMLAttributes<HTMLSpanElement>`.

## Example — default

```tsx
import { StatusPill } from '@misoto22/folio'

<div className="flex flex-wrap items-center gap-3">
  <StatusPill>Available for work</StatusPill>
  <StatusPill tone="warning" pulse={false}>Partial outage</StatusPill>
</div>
```

## Example — settled and live

```tsx
import { StatusPill } from '@misoto22/folio'

<div className="flex flex-wrap items-center gap-3">
  <StatusPill>Live</StatusPill>
  <StatusPill tone="warning" pulse={false}>Degraded</StatusPill>
  <StatusPill tone="danger" pulse={false}>Incident open</StatusPill>
  <StatusPill tone="neutral" pulse={false}>Archived</StatusPill>
</div>
```

## Example — one per view

```tsx
import { Badge, Separator, StatusPill } from '@misoto22/folio'

<div className="flex w-full max-w-md flex-col gap-4">
  <div className="flex items-center justify-between gap-4">
    <span className="font-heading text-[length:var(--fs-item)] text-(--ink)">
      Deploy pipeline
    </span>
    <StatusPill tone="warning">Degraded</StatusPill>
  </div>
  <Separator />
  <ul className="m-0 flex list-none flex-col gap-2 p-0 text-sm text-(--ink-2)">
    <li className="flex items-center justify-between gap-4">
      Build <Badge tone="success">Passed</Badge>
    </li>
    <li className="flex items-center justify-between gap-4">
      Typecheck <Badge tone="success">Passed</Badge>
    </li>
    <li className="flex items-center justify-between gap-4">
      Visual diff <Badge tone="warning">2 changed</Badge>
    </li>
  </ul>
</div>
```