StatusPill

A small rounded pill with an optional leading dot that labels the state of a run, deployment, or record.

When to use

• Status columns in tables and lists: Ready, Backing up, Verification pending, Failed, Paused.
• Inline state next to a title or in a TextRow value.
• Not for counts or categories without a state meaning: use Badge or Chip. Not for messages that need explanation: use Alert.

Usage

import { StatusPill } from "@/components/iris/status-pill/status-pill";

h(StatusPill, { tone: "green" }, "Ready");
h(StatusPill, { tone: "red" }, "Failed");
h(StatusPill, { tone: "neutral", dot: false }, "18 of 30 connections");

Props

Prop	Type	Default	Description
children	ReactNode	—	Required. Short status text in sentence case.
tone	"green" | "orange" | "red" | "accent" | "neutral"	"neutral"	Tinted background and text colour.
dot	boolean	true	Shows the 6px leading dot.
className	string	—	Extra classes.

Notes

• Static text, no role. Colour is never the only signal: the label carries the meaning.
• Tones map to --green-tint / --green, --orange-tint / --orange, --red-tint / --red, --accent-tint / --accent-ink, and --inset / --ink-2 for neutral (which sits close to the page colour in light mode, so use it on a surface).
• 24px tall, fully rounded, 13px medium text.