Toast

The short confirmation that an action landed, stacked bottom-center above everything else. React apps/web/src/components/notifications/ToastProvider.tsx (the app, not @acrm/ui), CSS apps/web/src/ds/toast.css.

It reports the result of an action the user just took. It is not a place for anything they must read to continue.

When to use

  • A completed, user-initiated action: save, create, move, delete, unlock, export.
  • A destructive action that can be undone — with a single Vrátit.
  • A failure of such an action, with Zkusit znovu.
  • A long action running in the background, as a loading toast that later resolves into success or error.

When not to use

  • A validation message — that belongs at the field.
  • A failed load of content — that is error-state, in the slot that failed.
  • Something the user must acknowledge — that is a dialog.
  • Something that happened without the user (an assignment, a reminder) — that is notifications.

Anatomy

  • Host div.toast-host[role="region"][aria-label="Oznámení"], fixed at left: 50% with translateX(-50%), 22px from the bottom, pointer-events: none.
  • Toast div.toast.<type>: .toast-ic (18px) · .toast-main with .toast-t and optional .toast-d · optional .toast-act > .toast-btn · optional .toast-x close.
  • Types: success · info · warning · error · loading. The icon follows from the type; the call site never picks it.
  • Width 400px, capped by the viewport.

Measured: the stack holds at most three — a fourth push drops the oldest. Non-loading toasts auto-dismiss after 4s; a loading toast never does and has no close button. Hovering the stack pauses every timer and leaving resumes from the remainder.

Best practices

Do

  • Write one short past-tense line: Obchod uložen, Poznámka smazána.
  • Offer at most one action, and make it the undo or the retry.
  • Resolve a loading toast into success or error — never leave it up.
  • Let the type pick the icon and the tone.

Don't

  • Stack more than the user can read; three is the cap and it is not a target.
  • Put a toast where a field error belongs.
  • Make a toast the only place an important fact appears — it disappears in four seconds.
  • Rebuild the host with position: static without also neutralising transform; the host is centred by translateX(-50%), and dropping it into the flow without that shifts the whole stack 200px left.

Content

  • Title: past tense, no full stop, sentence case.
  • Description: only when the title cannot carry it alone.
  • Action label: the verb (Vrátit, Zkusit znovu).
  • notifications — events the user did not cause.
  • error-state — a failure that belongs in the page, not over it.
  • loader — the spinner the loading toast uses.
  • Stories: components--toast--default, --variants, --states, --composition.

Source: docs/toast/toast.usage.md · GitLab