Status dot | Arcadia Design

import { ListRow, StatusDot } from "@arcadia/ui";

<div {...sx("cmp-rows", cmp.rows)}>
  <ListRow
    size="lg"
    leading={<StatusDot status="running" />}
    label="Preferences dialog"
    meta="now"
  />
  <ListRow
    size="lg"
    leading={<StatusDot status="attention" />}
    label="Plan the onboarding flow"
    meta="4m"
  />
  <ListRow
    size="lg"
    leading={<StatusDot status="unread" />}
    label="Quarterly report"
    meta="13h"
  />
  <ListRow
    size="lg"
    leading={<StatusDot status="error" />}
    label="Fix the flaky upload test"
    meta="16h"
  />
  <ListRow
    size="lg"
    leading={<StatusDot status="idle" />}
    label="Colour tokens"
    meta="2d"
  />
  <ListRow size="lg" leading={<StatusDot status="draft" />} label="New chat" meta="3d" />
</div>

TSX

import { StatusDot } from "@arcadia/ui";

<StatusDot status="attention" label="Needs your answer" />

One 14×14 slot for chat rows and lists: a 6px dot, a hollow ring, the alert glyph or the running pine, so a row never shifts as its chat changes state. Idle draws nothing. attention is the only lit status: waiting on you is the one moment that is literally a light. unread is the same light without the halo, which rootStyle can tint with a product's own colour, red included: status reads by shape before hue, and only error draws the alert glyph.

enter pops the mark in once, from --badge-scale over --duration-badge, for a state that just appeared: a badge on an avatar's corner, a row's unread dot.

A change pops

A dot that turns unread, attention or error after it mounted pops the same way on --ease-enter. A turn to running or idle changes in place.

Quarterly report running

import { useState } from "react";
import { Button, ListRow, StatusDot } from "@arcadia/ui";

function Change() {
  const [at, setAt] = useState(0);
  const status = TURN[at % TURN.length]!;
  return (
    <div data-demo="status-change" {...sx("cmp-rows", cmp.rows, cmp.rowsNarrow)}>
      <ListRow size="lg" leading={<StatusDot status={status} />} label="Quarterly report" description={status} interactive={false} />
      <div {...sx("cmp-bar", cmp.bar)}><Button variant="secondary" size="sm" onClick={() => setAt(at + 1)}>Next status</Button></div>
    </div>
  );
}

A dot that changed less than a second before holds still, so a state that flaps never flickers; so does a change under data-instant (a list hydrating), under reduced motion and while the page is hidden.

A run's six marks

Subagents, workflows and the chats a chat started read in six states. Only Working moves, only Needs you takes a colour, Failed only its glyph's ink.

Working

Needs you

Waiting

Done

Failed

Stopped

import { ListRow, StatusDot } from "@arcadia/ui";

<div {...sx("cmp-rows", cmp.rows, cmp.rowsNarrow)}>
  {RUN_MARKS.map(([s, word]) => <ListRow key={s} size="md" leading={<StatusDot status={s} />} label={word} interactive={false} />)}
</div>

A thing's state

tone marks the state of something that is not a run or a chat: a connector, a plugin, an account.

Ready

Needs trust

Can't connect

Off

Not checked

import { ListRow, StatusDot } from "@arcadia/ui";

<div {...sx("cmp-rows", cmp.rows, cmp.rowsNarrow)}>
  {TONES.map(([tone, word]) => <ListRow key={tone} size="md" leading={<StatusDot tone={tone} />} label={word} interactive={false} />)}
</div>

A steady dot in the tone's ink beside the word that names it, with no pop and no glyph. A scope or a tag is a Badge.

Statuses

idleDone and seen. Draws nothing (the slot keeps the indent), so a long list stays quiet.

unreadFinished while you were away. The light without its halo, which a product may tint.

attentionWaiting on you: a question or an approval. The beacon with a steady halo.

errorThe last turn failed. The alert glyph at its label's letter height, so a tinted dot never reads as a failure.

draftNever sent. A hollow ring.

runningLive. Renders the Pine Sweep.

waitingA run that goes on later: queued, paused, or waiting for its plan. A hollow circle at text height, still.

doneA run that finished. A quiet check: in a parent's list a finished child is information, so it keeps a mark.

stoppedA run someone stopped, or a restart cut. The stop square.

skippedA step an ended run never reached: not run, never pending. A quiet dash.

rootStyle takes layout and these knobs, each a palette token. The status sets them; set them yourself for a status the kit doesn't have, or to tint a mark with a product's own colour.

--status-dot-color: PaintDefault var(--status-idle); The dot's fill, a glyph's ink.
--status-dot-ring: PaintDefault transparent; A 1px ring inside the dot (a draft's hollow ring).
--status-dot-halo: Paint | `color-mix(in srgb, ${Ref<Palette>} ${number}%, transparent)`Default transparent; A steady 2px halo around the dot (needs-you).

Decorative unless given a label, which makes it an img with that name. Colour alone never carries the status: say it in the row's text, its aria-label, or the dot's label ("Needs your answer"). The attention halo holds steady and never blinks.

StatusDot

status: "idle" | "unread" | "attention" | "error" | "draft" | "running" | "waiting" | "done" | "stopped" | "skipped"Default "idle"; idle: done and seen (draws nothing). unread: done while away (tint it through rootStyle). attention: waiting on the user (a steady halo). error: failed (the alert glyph). draft: never sent (a hollow ring). running: live (the PineSweep). A run's waiting (a hollow circle), done (a check), stopped (the stop square), skipped (a dash), glyphs at text height.
tone: "success" | "warning" | "danger" | "muted" | "neutral"; The state of a thing that is not a run or a chat (a connector's Off, Needs trust, Can't connect), beside the word that names it: a steady dot in the tone's ink, never a pop or a glyph. Set, it stands in for status.
label: string; Accessible name ("Needs your answer"). Omit when the status is also stated in text.
enter: boolean; Pops in once on mount (a badge on an avatar, a row's unread dot). A later change into unread, attention or error pops on its own. Never under reduced motion, data-instant or a hidden page.
rootStyle: RootStyle<StatusDotKnobs>; Typed StyleX override: layout and the --status-dot-* knobs.

Rest props go to <span> props and render.

Usage

A change pops

A run's six marks

A thing's state

Statuses

Customising

Accessibility

API reference

StatusDot