Toast notifications provide brief, non-blocking feedback after user actions. Auto-dismiss after a few seconds.
| Variant | Icon | Use |
|---|
| Success | ✓ | Action completed |
| Error | ✕ | Something went wrong |
| Warning | ⚠ | Needs attention |
| Info | ℹ | Neutral information |
| Position | Use case |
|---|
| Top-right | Default, least disruptive |
| Top-center | Important alerts |
| Bottom-left | Form submissions |
| Property | Value |
|---|
| Duration | 4–6 seconds |
| Max visible | 3 toasts at once |
| Dismiss | Auto + manual close button |
| Animation | Slide in + fade out |
- 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