Toast Component

Overview

Toast shows compact notifications in a stack along the screen edge. They can enter elastically or grow from the triggering button, morph their icon from loading to success or error, and be swiped away with a subtle tilt.

Use it to confirm saved settings, uploads, completed tasks, and failed requests without a separate screen. Users should know what happened and whether to act, with the message always more important than the motion.

Theme and Interaction Customisation

Choose default or glass surfaces, roundness, stack position, coloured accent edges for success, warning, and error, and optional descriptions and action buttons. Motion options include elastic or smooth entrances, trigger-origin growth, content fade, fade or slide exits, swipe tilt, icon morphing, and a timer bar.

Example Production Use Case

A project management app can show a loading toast during a file upload, then morph it to success with an Open action, or to an error with Retry, without the user losing their place.

An ecommerce store can confirm add-to-cart with a short toast that grows from the button and dismisses itself after a few seconds.

A SaaS settings page can use a glass toast with a collapsible description to confirm a saved preference and explain what it changes.

Best Used For

• SaaS dashboard confirmations.
• File upload progress and results.
• Form submission feedback.
• Ecommerce cart and wishlist updates.
• Project management activity.
• Productivity app operations.
• Account settings changes.

Not For

Information users must read before continuing, like legal notices or destructive confirmations, needs a persistent interface.

Field validation errors should stay next to the field, not only in a temporary toast.

Don’t toast every minor click, and use a dedicated progress panel for long operations needing supervision.

Performance Budget

Keep entrances, exits, and stack moves light, follow the latest state during rapid updates, and keep swipe tracking local. Limit simultaneous toasts, stop timers on dismissal, and go easy on blurred glass on low-powered devices.

Accessibility and Mobile

Use polite live regions for routine messages and assertive ones only for urgent errors, without stealing focus. Actions and close controls need labels and keyboard support, and messages need enough time to read. On mobile, keep the stack clear of navigation, make swipe optional, and keep descriptions inside the viewport. With reduced motion, simplify entrances, morphing, and tilt.

Common Mistakes

• Showing success before the operation finishes.
• Overloading the stack.
• Using short timeouts on toasts with actions.
• Offering swipe as the only way to dismiss.
• Using trigger-origin animation without valid coordinates.
• Showing timer bars on persistent toasts.
• Relying on colour alone for status.
• Overusing glass effects.
• Ignoring reduced-motion preferences.