Feedback after an action

The problem

When nothing visible changes after a press, people press again, and now there are two requests. When everything changes at once, they can't tell what their action did. And modal “Success!” dialogs interrupt for no reason.

When to use it

Use it for

Actions whose result isn't obvious on screen: sending, saving, archiving, copying.
Reversible actions: pair the toast with Undo.

Not for

The result is visible already, like a toggle switching on: no toast needed.
Errors the person must fix: use an inline Alert or a field error, which don't time out.
Anything that needs a decision: use a Dialog.

Anatomy

Toast regionOne per app, rendered by ToastProvider. It stacks up to three toasts.
TitleWhat happened, in the past tense: “Message archived”.
Tonesuccess, danger, info or loading. The icon carries it, the text says it.
ActionOne button, usually Undo. Keeps the toast up for at least 8 seconds.

How to build it

Wrap your app in ToastProvider once, and call useToast() wherever you act.
Do the action straight away, then add a toast saying what happened.
For reversible actions, add action: { label: "Undo", onAction } and keep what you need to restore.
For slow work, add a loading toast and replace it with the result.
Keep titles short; add a description only when there is more to say.

app.tsx

import { Button, ToastProvider, useToast } from "@nexera-ui/react";

// once, near the root
<ToastProvider>
  <App />
</ToastProvider>;

// anywhere below
function ArchiveButton({ message }: Props) {
  const toasts = useToast();
  return (
    <Button
      onPress={() => {
        archive(message.id);
        toasts.add({
          title: "Message archived",
          action: { label: "Undo", onAction: () => restore(message.id) },
        });
      }}
    >
      Archive
    </Button>
  );
}

Accessibility

Keyboard support
Key	Action
`F6`	Moves focus to the toast region and back.
`Tab`	Moves between a toast's action and close button.
`Escape`	Closes the focused toast.

Toasts are announced through a live region: polite by default, assertive for danger.
Timers pause while the toast is hovered or focused, and are never shorter than 5 seconds (WCAG 2.2.1).
Toasts with an action stay at least 8 seconds, so there's time to reach Undo.
Never put the only path to something important in a toast: it disappears.

Do and don't

DoAct immediately and offer Undo.

Don'tAsk “Archive this message?” first.

DoSay what happened: “3 requests approved”.

Don'tSay “Success!”.

DoShow errors that need fixing inline, next to the cause.

Don'tReport a failed save in a toast that vanishes after 5 seconds.