# StatusDot

The dot beside a status word.

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

## Anatomy

- **Box** (required) — The aria-hidden <span> the whole thing lives in — 8px square at md, 7px at sm, inline-grid and shrink-0 so it stays circular in a flex row however long the label beside it runs.
- **Dot** (required) — An absolutely-positioned filled circle in --ok, --warn, --danger or --ink-3-aa. It is the only part of this component tone touches.
- **Halo** — A second ring of the same colour on the folio-halo keyframes, present only while pulse is true. A separate element rather than a box-shadow, because a shadow in this system is never blurred.

## Best practices

### Do

- Set pulse={false} for anything settled. It defaults to true, so a dot for a build that finished or a status that will not change today carries a halo announcing that something is happening right now.
- Reach for StatusPill the moment you find yourself writing the dot and its label together — that pairing assembled per call site is how one site ended up with three dot sizes and two pulse timings for the same state.
- Let it sit directly in the flex row beside its label: shrink-0 is what keeps it round, and a dot wrapped in a div that can shrink comes out an ellipse as soon as the label runs long.

### Don’t

- An aria-label on the dot buys nothing — aria-hidden is still set, and a hidden element has no name to give. A call site with no visible label is a state no screen reader ever reports.
- sm and md are 7px and 8px, one pixel apart. That is an optical adjustment for sitting beside smaller type, not a size scale, and nothing in a layout should be built on the difference.

## Accessibility

- aria-hidden without exception: it repeats a state the adjacent label already names.
- The halo is motion-safe, so a reader who asked for less motion gets a still dot.

## StatusDot

The dot beside a status word. `aria-hidden` without exception: the dot repeats a state the adjacent label already names, and a screen reader announcing "available" twice is worse than not announcing the decoration at all. If a call site has no visible label, the fix is a label, not an `aria-label` on the dot. The halo is a separate absolutely-positioned ring rather than a box-shadow, because Law 2 of this system is that a shadow is never blurred — and it is motion-safe, so a reader who asked for less motion gets a static dot.

### Props

- `size` — `'sm' | 'md'` default `'md'`. 7px / 8px. `md` is the default.
- `tone` — `StatusTone` default `'success'`.
- `pulse` — `boolean` default `true`. A halo that grows and dissolves, for "live right now". Off for a settled state.

Also accepts: `HTMLAttributes<HTMLSpanElement>`.

## Example — tones

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

<div className="flex flex-wrap items-center gap-6 text-sm text-(--ink-2)">
  <span className="inline-flex items-center gap-2"><StatusDot /> Live</span>
  <span className="inline-flex items-center gap-2"><StatusDot tone="warning" pulse={false} /> Degraded</span>
  <span className="inline-flex items-center gap-2"><StatusDot tone="danger" pulse={false} /> Down</span>
  <span className="inline-flex items-center gap-2"><StatusDot tone="neutral" pulse={false} /> Idle</span>
</div>
```

## Example — live and settled

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

<div className="flex flex-col gap-3 text-sm text-(--ink-2)">
  <span className="inline-flex items-center gap-2">
    <StatusDot /> Deploying 0.4.1 to production
  </span>
  <span className="inline-flex items-center gap-2">
    <StatusDot pulse={false} /> Deployed 0.4.0, fourteen minutes ago
  </span>
</div>
```

## Example — down a table

```tsx
import { StatusDot, Table, TBody, TD, TH, THead, TR } from '@misoto22/folio'

<Table caption="Service health" density="compact">
  <THead>
    <TR>
      <TH>Service</TH>
      <TH>State</TH>
      <TH align="end">Last check</TH>
    </TR>
  </THead>
  <TBody>
    <TR>
      <TD>api.misoto22.com</TD>
      <TD>
        <span className="inline-flex items-center gap-2">
          <StatusDot size="sm" pulse={false} /> Healthy
        </span>
      </TD>
      <TD align="end">30s ago</TD>
    </TR>
    <TR>
      <TD>Search index</TD>
      <TD>
        <span className="inline-flex items-center gap-2">
          <StatusDot size="sm" tone="warning" pulse={false} /> Rebuilding
        </span>
      </TD>
      <TD align="end">2m ago</TD>
    </TR>
    <TR>
      <TD>Image pipeline</TD>
      <TD>
        <span className="inline-flex items-center gap-2">
          <StatusDot size="sm" tone="neutral" pulse={false} /> Paused
        </span>
      </TD>
      <TD align="end">1h ago</TD>
    </TR>
  </TBody>
</Table>
```