Toast

Toast

Toast notifications provide brief, non-blocking feedback after user actions. Auto-dismiss after a few seconds.

Variants

Variant	Icon	Use
Success	✓	Action completed
Error	✕	Something went wrong
Warning	⚠	Needs attention
Info	ℹ	Neutral information

Placement

Position	Use case
Top-right	Default, least disruptive
Top-center	Important alerts
Bottom-left	Form submissions

Behavior

Property	Value
Duration	4–6 seconds
Max visible	3 toasts at once
Dismiss	Auto + manual close button
Animation	Slide in + fade out

Best Practices

• One message per toast — don’t combine multiple actions
• Actionable — optional “Undo” or “View” button
• Don’t block — toasts sit above content, don’t interrupt flow