Feedback
Confirm routine actions with a brief toast. Keep errors beside the form and persistent problems in a banner where someone can act on them.
The demo uses a small page frame. In the admin, the toast is centered across the browser viewport, 16px from its top edge.
- Use the fewest words that clearly confirm the action. Prefer one short sentence and one line.
- Use “Hours saved.”, “Hours reset.”, or “Invitation sent.”
- For an unsaved copy, use “Hours copied. Save to keep.”
- Show success only after the action succeeds. Preserve a delivery failure or other partial result in the message.
- Show one toast at a time. A new message replaces the old one and restarts its timer, even when the wording repeats.
- Use a toast for confirmation. Instructions and errors that need attention remain visible near the work.
A small drop, a quiet bounce.
The toast enters from above the viewport, settles with a tiny bounce, displays briefly, then returns upward. It never moves the page or takes keyboard focus.
| Phase | Timing | Motion |
|---|---|---|
| Entrance | 0–380ms · ease | Start transparent at −100% of the toast’s height minus 20px. At 65%, reach full opacity and 4px below the resting position. At 85%, move 1px above it. Finish at 0px. |
| Display | Until 3,000ms from appearing | Stay still at the top center. The entrance is included in this three-second timer. |
| Exit | 3,000–3,250ms · ease-in | Fade out while sliding upward to −100% of the toast’s height minus 20px, then remove the toast. |
Respect prefers-reduced-motion: reduce: show and hide without the slide or bounce. Announce the message through a polite, atomic live region. Keep a dismiss button with the accessible label “Dismiss notification”.
Plum surface, cream text, mint check icon, 12px corners, a quiet border and soft shadow. Use 13px text at weight 650, 16px icons, and a 24px dismiss control. Keep at least 16px of viewport space on both sides on narrow screens; let the short message wrap if needed.
Implementation references
apps/admin/components/toast.client.tsx exports ToastHost, showToast(message), and ActionFeedback. Mount one host in the admin layout. Use showToast after a successful client action or ActionFeedback for form action results with a brief success message. Form errors remain inline.
apps/admin/app/globals.css defines toast-region, admin-toast, admin-toast-in, and admin-toast-out. The replay here mirrors the production timing and movement without changing company data.