Toast

Best practices

Keep it brief - Toast messages should be succinct – a single actionable idea, ideally 1–2 lines of text.

Contextual placement - Place toasts where users’ eyes naturally rest (top-right for LTR interfaces, bottom for mobile where appropriate).

Timely and relevant - Show a toast only in direct response to a user action (e.g., save success, error, undo opportunity).

Auto-dismiss with optional control - Toasts should disappear automatically after a few seconds, and optionally offer a clear control for manual dismissal (e.g., an ‘X’ button).

When to use

• Transient feedback that doesn’t block action e.g., “Message sent”, “Settings saved”
• Undoable actions e.g., “Item deleted, Undo”
• Non-critical system messages e.g., “Offline mode activated”

Users shouldn’t have to respond immediately for their flow to continue.

When not to use

• Modal-worthy issues like errors or warnings that require user action (use alerts or dialogs instead).
• Blocking tasks that require users to read and act on the message (a toast is insufficient).
• Bulk or complex information for multi-step guidance or detailed content.
• Long texts and overly verbose toasts are hard to scan and easily missed.

Anatomy

1. Icon (optional)
2. Message
3. Action (optional)
4. Time countdown visualiser (optional)

Behaviour

Toasts appear in response to a user action and are shown without interrupting the current task or shifting page layout. They are displayed for a short, predefined duration before dismissing automatically, while still offering a clear option for manual dismissal if needed. If an action is included, it should be immediately actionable and fully accessible via keyboard and pointer input. When multiple toasts are triggered in quick succession, show only one toast at a time, or stack vertically with the newest message on top, limited to no more than 3.

Priority & Conflict

If two toasts trigger simultaneously, queue them rather than showing both at once.

Visual Hierarchy

• Use subtle backgrounds with clear contrast.
• Icons can aid scannability but should be optional and meaningful.

Placement

Default placement is always bottom center regardless of screen size.

Content guidelines

Tone and Clarity

• Clear, conversational voice - “Your message was sent.” instead of “Operation successful.”
• Action-first phrasing - “Saved.” “Deleted.” “Sent.”
• Use sentence case for readability.

Actionable CTA

• Concise buttons - “Undo”, “View”, “Retry”.
• Avoid secondary links - one action max.

Avoid Jargon

• Use familiar language - “File uploaded” not “Upload process finished.”

Accessibility Notes

• Toasts still need to be perceivable and operable.
• They should not obscure other UI content that users must interact with.
• Toast duration should respect readability times, content should be short enough for users to read, pause, or interact if needed.
  

(Detailed ARIA roles and keyboard behaviours are covered in the accessibility spec.)