COMPONENTS

Toast / Snackbar

Brief, non-blocking feedback messages that appear temporarily without interrupting the user flow. Toast offers 7 variants, 4 appearance styles, and full content control, ready in Figma and React.

Last Update:
JUN 01, 2026
Toast / Snackbar

Overview

Toast delivers brief, non-blocking feedback messages that appear temporarily without interrupting the user flow. With 7 semantic variants and 4 appearance styles, it covers every notification context, from success confirmations and danger alerts to neutral system messages, with full content control for simple one-liners and richer multi-action notifications.

Figma Preview

Preview in Figma

When should you use them?

Use a toast for brief, time-sensitive feedback that confirms an action or reports a result, like 'Saved', 'Copied to clipboard', or 'Message sent'. Unlike an inline alert, it appears temporarily and dismisses on its own, so use it when the message doesn't need to stay tied to the layout.

How should you use them?

  • Use a toast for brief, temporary feedback; use an inline alert for persistent, in-context messages.
  • Keep the message short, ideally confirming an action in a few words.
  • Auto-dismiss after a few seconds, but let users dismiss it manually too.
  • Include at most one action, like 'Undo', and keep it optional.
  • Avoid toasts for critical errors users must act on; use an inline alert or dialog instead.
  • Announce the toast to screen readers so it's not missed by non-visual users.
Create UI
PRE-SALE · 70% OFF · LIMITED TIME

Stop deciding.
Start shipping.

The system is ready. Free to start, or get full access
at 70% off before the price goes up at launch.

Start Free Now.
Upgrade Through Pre-sale.