Notifications & Toasts Checklist

Type	Use When	Duration
Toast	Async action completed — create, update, delete, send	4–5 seconds, auto-dismiss
Inline Banner	Form-level error from API or permission error on a page	Persistent until dismissed or resolved
Persistent Alert	Account-level issue requiring attention	Persistent, manual dismiss
Field Error	Specific form field validation failure	Until the field is corrected
Confirmation Dialog	Before a destructive action	User must respond

2. Toast Notifications

Types

Type	When	Color/Icon
Success	Action completed	Green ✓
Error	Action failed	Red ✕
Warning	Action completed with caveat	Amber ⚠
Info	Neutral information	Blue ℹ

Position: top-right desktop, top-center or bottom-center mobile
Z-index above all content including modals
Success toasts auto-dismiss after 4 seconds
Error toasts auto-dismiss after 6 seconds
Warning/info toasts auto-dismiss after 5 seconds
User can manually dismiss any toast
Hovering over a toast pauses auto-dismiss timer
Multiple toasts stack vertically
Maximum 3 toasts visible at once
New toasts appear at top of stack

Toast Content

Message is specific: Project created. not Success!
Message is past tense for completed actions
Error messages are human-readable, not raw error codes
Optional action button in toast: Undo or View
Undo action available for 5 seconds after delete if backend supports soft delete
No technical jargon or internal error codes visible to user

3. Inline Banners

Displayed inside the page or form — not floating. Used for errors that require the user's attention before they can continue.

Shown at top of the form or page section it relates to
Stays visible until dismissed or resolved
Includes X button to manually dismiss
Color-coded by type
Message explains what happened and what user should do
Whole-form API errors use inline banner, not disappearing toast
Permission errors use inline banner
Rate limit/quota errors use inline banner
Includes link/button if user can resolve it

4. Persistent Alerts

Shown in fixed alert bar below navigation
Cannot be permanently dismissed if issue unresolved
Clearly explains issue and next action
Removed automatically once issue is resolved
Not used for one-off notifications

5. Notification Content Standards

Written in plain language
Specific — names the entity involved
Actionable where relevant
Consistent — same event always produces same message
Correct tense
No exclamation marks on error messages
No all-caps

6. What Always Triggers a Notification

Record created
Record updated / saved
Record deleted
File uploaded
Invitation sent
Any async action that fails
Permission denied when attempting an action
Session expired
Backend validation error on form submission

Live Demo

1. When to Use Each Notification Type