UI PATTERNS
Toast variations
Toast and notification variations. Success, error, info, stacked, and
dark theme with auto-dismiss behavior.
NOTIFICATION
Success toast
Green accent with check icon. Auto-hides after 4 seconds or
dismiss manually.
Changes saved
Your project has been updated successfully.
NOTIFICATION
Error toast
Red accent with alert icon for error states and failures.
Upload failed
The file exceeds the 10MB size limit. Please try a smaller file.
NOTIFICATION
Info toast with action
Informational toast with an inline “Undo” action button.
Item deleted
The document has been moved to trash. Undo
NOTIFICATION
Stacked toasts
Multiple toasts stacked vertically with spacing. Each auto-hides
after 4 seconds with staggered timing.
Profile updated
Your changes have been saved.
New message
You have 3 unread messages.
Storage warning
You’re using 90% of your storage.
NOTIFICATION
Dark toast
Dark themed toast for dark interfaces. Subtle borders and muted
text.
Deployment complete
Your application is now live at production.