Saved
Your changes were synced.
Toast
Temporary feedback surface for non-blocking status updates.
- .source-toast-stack Positioned stack container
- .source-toast Card surface with semantic marker
- .source-toast::before Semantic marker bar
- .source-toast-body Title and description area
- .source-toast-actions Action and close controls
Content variants
Title only
Title with description
Additional context about what just happened.
With action
Undo, retry, or navigate from here.
Semantic variants
Success
Action completed.
Warning
Review this change before publish.
Error
Update failed. Try again.
Info
Background sync started.
Design intent
Toast delivers non-blocking feedback after a user-triggered action. It is not suitable for validation errors (those go below the failing field), not for decisions that need a response (use Modal), and not for background events the user did not trigger. Success toasts auto-dismiss; error toasts persist until the user acts.
Provider usage
Wrap your app with ToastProvider. Trigger notifications through useToast().
Use semantic palette values for contextual color accents.
Do and don't
Do
Saved
Short, one-line status message after a completed action.
Upload failed
Check your connection and try again.
Danger palette with a retry action for recoverable errors.
Message deleted
Undo action for immediately reversible operations.
Don't
Delete account?
This cannot be undone.
Do not use toast for destructive decisions. Use Modal instead.
Profile saved
Avatar updated
Email confirmed
Do not stack multiple toasts for a single event.
Your request has been submitted and is being processed by our system. You will receive an email confirmation once it has been reviewed.
Do not write long paragraphs. Keep toast text under 12 words.
Designer checklist
- Success toasts auto-dismiss after 4 to 5 seconds.
- Error toasts include an action or persist until dismissed.
- Toast messages are under 12 words.
- Reversible operations include an Undo action inside the toast.
- Toasts are never used for form validation errors.
Toast props
PropTypeDefaultDescription
titlestringnullPrimary heading.
descriptionstringnullSecondary text.
paletteneutral | accent | success | warning | danger | infoneutralSemantic color marker.
durationnumber4000Auto-dismiss timeout in ms.
ARIA attributes
AttributePurpose
role="status"Announces status changes politely.
aria-live="polite"Live region behavior for stack updates.