StatusPill

Stripe Badge

What state something is in, as Stripe's badge pairs: green for done, blue for in progress or waiting on someone else, orange only when the viewer must act, red for failed, grey for off. Pass any raw status string and the shared table picks the tone and the words (AWAITING_APPROVAL → “In review”); unknown words are neutral, never alarming.

pnpm add @zikzuk/ui

import { StatusPill, StatusProvider } from "@zikzuk/ui";

Raw statuses

CompletedPendingIn reviewNeeds actionFailedExpiredInactiveDraft

Your own words, and explicit tones

To visitSetup 3 of 6Delivered

When to use

A record's status in a list row, a summary pane, a page header's meta line.

Not for

What something is (a type, a channel, a role) — that is a Chip.

Props

StatusPill

Prop	Type	Description
status	string	Any raw status; tone and words come from the shared table.
tone	"done" \| "progress" \| "attention" \| "failed" \| "inactive" \| "neutral"	Set the tone yourself and pass the words as children.
children	ReactNode	Words of your own.
title	string	Hover text; defaults to the raw status.
className	string	Extra classes on the outer element.

StatusProvider

Prop	Type	Description
tones	Record<string, Tone>	Your app's status words and their tones.
labels	Record<string, string>	Their labels.