Build Assets
UI Component
Toast Notification
Non-blocking feedback message that appears briefly after a user action.
Platform: bothTags: toast, notification, feedback, snackbar
Purpose
Confirms an action completed (or failed) without interrupting the user's flow. Appears, waits, then auto-dismisses. Does not require interaction.
Anatomy
- Container: pill or rounded-rect, 4–8px radius, min-width 280px
- Icon: 16px — check (success), X (error), ! (warning), i (info)
- Message: 14px, single line preferred, max 2 lines
- Optional action: text link for undo or related action
- Close button: optional × for long-lived toasts
States
- Entering: slide up from bottom-right + fade in (200ms)
- Visible: static, 3–5s auto-dismiss timer
- Exiting: fade out + slide down (150ms)
- Hover: pauses auto-dismiss timer
Tokens
spacing
padding: 12px 16pxiconGap: 10pxactionGap: 12px
sizing
minWidth: 280pxmaxWidth: 420pxborderRadius: 8px
colors
success: var(--color-success-light) border var(--color-success)error: var(--color-error-light) border var(--color-error)info: var(--color-bg) border var(--color-border)
Do
- Keep messages under 60 characters — users scan toasts, not read them
- Use past tense for completion: "Saved", "Deleted", "Copied"
- Stack multiple toasts vertically with 8px gap
- Provide undo action for destructive operations (3–5s window)
Don't
- Use toasts for errors that require user action — use inline error instead
- Show more than 3 toasts simultaneously
- Use toasts for important information users must not miss
- Auto-dismiss error toasts — errors need to persist until acknowledged
Accessibility
- role="status" for non-urgent (success/info), role="alert" for errors
- aria-live="polite" for status, aria-live="assertive" for errors
- Do not rely on color alone — icon + text convey the type
- Close button needs accessible label: aria-label="Dismiss notification"