Component reference

StatusDot

A dot that shows the state of a piece of work.

Preview

Status semantics

One dot expresses one state only: an accent pulse means something is happening, green means returned or connected, orange means it waits for you, red means failure, and a hollow gray dot means not yet verified. The dot carries no text of its own, so a description must sit next to it.

packages/meowtail/stories/status-dot.stories.tsxline 32tsx

render() {
  return (
    <SchemePair>
      {() => (
        <div style={{ display: "grid", gap: "18px" }}>
          <div style={{ display: "grid", gap: "10px" }}>
            {states.map(([state, label, note]) => (
              <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                <StatusDot state={state} />
                <strong style={{ fontWeight: "500" }}>{label}</strong>
                <span style={{ color: "var(--ui-ink-tertiary)" }}>{note}</span>
              </div>
            ))}
          </div>
          <Inline align="center" gap="compact">
            <span style={{ fontSize: "12.5px", color: "var(--ui-ink-secondary)" }}>
              With halo (the only leading status on a page)
            </span>
            <StatusDot state="processing" halo />
            <StatusDot state="success" size={7} halo />
          </Inline>
          <Inline align="center" gap="compact">
            <span style={{ fontSize: "12.5px", color: "var(--ui-ink-secondary)" }}>
              Sizes 6 / 8 / 10
            </span>
            <StatusDot state="processing" size={6} />
            <StatusDot state="processing" />
            <StatusDot state="processing" size={10} />
            <StatusDot state="returned" size={10} />
          </Inline>
        </div>
      )}
    </SchemePair>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { StatusDot } from "meowtail";

<StatusDot state="processing" halo />

API reference

It is decorative: the owner supplies adjacent text, so it is hidden from assistive tech.

Props

Prop	Type	Default
`state`	`"processing" \| "success" \| "returned" \| "warning" \| "danger" \| "unknown" \| "idle"`	`"unknown"`
`size`Diameter in px; the state shape is drawn inside it.	`number`	`8`
`halo`A soft ring behind the dot, for the one status that leads a surface (header, connection).	`boolean`	`false`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as status-dot in the meowtail component registry.