Snackbar

Accessibility

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.

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.

Reduced motion

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.

Known caveats

Toasts are not modals. If the user must make a decision before proceeding, use a Dialog 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.

Snackbar / API and Development

Sources / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Reduced motion

Known caveats

Snackbar

Accessibility

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.

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.

Reduced motion

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.

Known caveats

Toasts are not modals. If the user must make a decision before proceeding, use a Dialog 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.

Snackbar / API and Development

Sources / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Reduced motion

Known caveats