Skip to content
EspañolEnglish
All components (244)

Save status

Management · AutosaveIndicator

What it is and when to use it

Says where the automatic saving stands: no changes, unsaved changes, saving, saved (with the time) or failed (with a button to retry). It goes along with the useAutosave hook, which is what saves.

When to use it

  • A long form, an editor or a draft that saves itself while you write.
  • useAutosave({ value, onSave }) watches the value and, when it stops changing (1.5 s by default), saves it. It returns status, savedAt, error and saveNow(); you pass them to this indicator.
  • It saves one at a time: if the value changes while saving, when it finishes it saves the new one.
  • A failure is neither lost nor retried in a loop: it stays in error until the value changes or saveNow is called.
  • While there are unsaved changes, the browser warns when trying to close the tab (warnOnLeave).

When not to

  • Saving that the user decides with a button: the button already says "Saving…".
  • Saving is not a guarantee: onSave is your function, and the server decides whether to accept it.

Keyboard: the only control is "Retry", a normal button.

Accessibility: it is a status region (role="status"), so the screen reader announces each change without moving focus; the failure carries text as well as colour. The time is written in the browser and not on the server.

Fine appearance: muted text; the failure, in the error tone.

What it looks like

Saved

<AutosaveIndicator
  status={guardado.status}
  savedAt={guardado.savedAt}
  onRetry={guardado.saveNow}
/>

Props

Import it with import { AutosaveIndicator } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
statusrequiredAutosaveStatusWhere the saving stands: what `useAutosave` returns.
classNamestringMerged with the library classes; it does not replace them.
onRetry() => void | Promise<void>Retry after a failure: the button appears only in `error`.
savedAtDate | nullWhen it was last saved: it is written as «Saved at 10:32».

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: