Toasts

Transient notifications anchored to a screen corner — five tones, five positions, optional action button and auto-dismiss.

Click to spawn a toast in the chosen corner

Each toast carries a tone-colored left border, matching icon, and a progress bar at the bottom that drains as the auto-dismiss timer runs.

Where on the viewport the toast appears

Auto-dismiss after 4 seconds

Inline undo / retry button

Action buttons appear under the description. Clicking them dismisses the toast and runs the handler — perfect for undoing destructive actions.

No auto-dismiss until user closes it

Set duration: 0 to keep the toast on screen. Useful for connection-loss or critical errors.

Toasts queue vertically with consistent gap

Newer toasts appear at the bottom of the stack. Dismissed ones are removed without shifting layout abruptly.

What makes a great toast

Duration

4s default. Use 6s+ for toasts with actions so the user has time to read & react.

One action

Toasts are ephemeral — keep to a single, optional action. Anything more belongs in a modal.

Accessibility

Wrap the viewport in aria-live="polite" so screen readers announce new toasts.

Avoid spam

If the same event fires repeatedly, replace the existing toast instead of stacking duplicates.

Currently on screen

0 active