Snackbar from @prepared911/ui-core wraps the Sonner toast library. The primitive handles live-region announcements, dismissal, and action slots; your job is to choose the right severity, keep messages short, and respect user time with appropriate durations.
What the component handles
- Live-region announcements. Sonner uses
role="status" for info/success and escalates to role="alert" for errors so screen readers announce them correctly.
- Auto-dismissal. Default duration gives screen-reader users time to hear the content.
- Keyboard dismissal. Escape dismisses the focused snackbar; Tab reaches action buttons and close affordances.
- Focus preservation. Toasts do not steal focus from the user's current task.
- Matching severity. Use
Error only for failures, Warning for recoverable issues, Success for confirmations, Info for neutral updates. Severity drives the live-region role.
- Concise, scannable copy. Titles under ~60 characters; descriptions optional. Don't cram paragraphs into a toast.
- Action labels in verb form. "Undo", "View", "Retry"—not "Click here".
- Duration matched to importance. Keep the default (5 s) for confirmations; extend for errors that need reading; persist until dismissed for destructive-undo actions.
- Escape dismisses the focused snackbar.
- Tab / Shift+Tab move into the snackbar to reach the action link and close button.
- Enter / Space activate the focused button or link.
role="status" or role="alert" per severity.- Action links render as real buttons or anchors, not
onClick-only spans.
- External links signal themselves via
target="_blank" + rel="noopener" and announce "opens in new window" when possible.
Screen reader announcements
- Info/success announce politely; errors announce assertively.
- Keep any toast with an action visible long enough for the screen reader to finish reading the entire message plus the action label.
- If two messages queue, Sonner stacks them; avoid flooding the live region with rapid toasts.
- Sonner respects
prefers-reduced-motion: reduce by shortening or removing slide-in animation.
- Never block interaction with a motion-heavy toast when reduced motion is set.
- Toasts are not modals. If the user must make a decision before proceeding, use a
Modal or inline confirmation instead.
- Hidden errors. If an error requires user action (re-auth, retry a failed batch), surface it persistently in the UI, not just a transient toast.
