Gallery

Design a toast and snackbar system for a product UI. Treat them as two related patterns: toasts are passive status messages, while snackbars can carry a single action such as Undo or View. Show how they differ in placement, duration, and interaction.

Build the core variants a product team would need: success, info, warning, and error. Include default, with-action, dismissible, and stacked states. Show how each message reads at a glance without depending on color alone.

Design for real usage, not just the happy path. Include short and long message lengths, multiple notifications arriving at once, and a recovery case where the user can reverse an action before the message disappears. Keep spacing, icon use, and motion consistent across all states.

Make the system feel shippable in a real app: clear hierarchy, readable timing, and controls that stay usable while the message is on screen.