Components

Status Pill

A small status that changes in place, such as Saving…, Saved or Not saved with a Retry, and fades back once the news is old.

Saved

Import

import { StatusPill, StatusPillAction } from '@rinzai/zen';

API reference

<StatusPill>

A small rounded status that changes in place, e.g. an app's "Saving…", "Saved", "Not saved · Retry": an icon (a Spinner, a Check) and a few words. quiet fades it back once the news is old (a save a few seconds ago). Changes are read out politely (role="status"). For an action inside it, such as Retry, use StatusPillAction. For a fixed label or count, use Badge.

Prop	Type	Default
`quiet` Faded back into the page: the news is old.	`boolean`	`false`
`tone` `positive` in the accent colour (done), `negative` in red (failed); `default` is muted (in progress).	`"default" \| "negative" \| "positive"`	`default`

<StatusPillAction>

A text button inside a StatusPill, e.g. Retry, in the pill's colour.

No props of its own; it accepts the props of the element it renders.