Snackbar from @prepared911/ui 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.
What you must provide
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.
Keyboard behavior
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.
Semantics and roles
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.