Status

SaveStatus

A quiet word for anything that saves as you go: fields that save as you type, pickers, the board and the calendar.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`state`Required	`'idle' \| 'saving' \| 'saved' \| 'error'`
`savedAt`	`number`	Changes each time a save finishes, so "Saved" shows again for the next one.
`onRetry`	`() => void`
`delay`	`number`	ms before "Saving" shows (default 300).
`savedFor`	`number`	ms "Saved" stays (default 2000).
`savingLabel`	`string`
`savedLabel`	`string`
`errorLabel`	`string`
`retryLabel`	`string`
`className`	`string`

Guidelines

A quiet word for anything that saves as you go: fields that save as you type, pickers, the board and the calendar. It sits in the page header area (beside the actions, or in a detail page's top row) and keeps to one line.

Provide: state (idle, saving, saved or error), savedAt (a number that changes each time a save finishes), and onRetry.

A SaveStatus that appears while state is already saved (you moved to another page after a save) stays quiet: it only says Saved for saves that finish while it's on screen.

"Saving" shows only when a save takes longer than delay (300ms), so instant saves never flash it.
"Saved" with a check stays for savedFor (2 seconds), then the status goes quiet.
On a failure: "Couldn't save." and a Try again button. The store has already put the change back and said so in its alert; Try again sends the same change again.
Words and an icon carry every state, never color alone. The words are a polite live region, so screen readers hear them without being interrupted.
The fade in respects prefers-reduced-motion.
As the only action in a PageHeader, an idle status takes no room (its live region stays), so phones get no empty row.
Keep it calm: one per page, no spinner, no toast.