SaveIndicator
Whether the user's work is saved: no changes, pending, saving, saved or failed, as reported by your save call.
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add save-indicatorDependencies
What add save-indicator installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
Examples
2 examples · 1 componentStates
The five statuses with their default labels.
Driven by the save request
Typing marks the note dirty; the status follows the request, and a failure offers Retry.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
statusThe state of the real save operation; you own the transitions. | "idle" | "dirty" | "saving" | "saved" | "error" | — |
childrenReplaces the default English label: translations or detail like "Saved at 14:32". | ReactNode | the status label |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| idle | No changes: an empty dot, muted. |
| dirty | Unsaved changes: a warning-colored dot. |
| saving | A spinner (static with reduced motion). |
| saved | A success check; pass children to add the time. |
| error | An alert icon and error-colored text; pair it with a Retry action. |
Accessibility
A role="status" live region that stays mounted: each change is announced once, politely, without moving focus.
Every state has text; the icon and color only reinforce it. Error also turns the text red.
It reports, it doesn't act: put the Retry button next to it, outside the live region, so the button isn't re-read on every change.
Derive the status from the actual request (pending → saving, resolved → saved, rejected → error). A timer that shows "Saved" without a response is a false promise.
Server-safe: no client JavaScript of its own.