Skip to main content

Toast

A toast displays a short system message as a result of a user's action.

Structure​

  • Container: Wraps the content.
  • Message: Text content indicating the purpose and potential next steps.
  • Dismiss button: Removes the toast for a user.

Guidelines​

When to use​

  • To display temporary short messages.
  • To react to user input (let users know something is happening).

When not to use​

  • If the message should stay on the screen—use an Alert.
  • When you want to include an action—use an Alert.
  • When an action is necessary before continuing—use a Modal.

Variants​

  • Information
  • Success
  • Warning
  • Error

Behaviour​

A toast appears with an ease-in animation from the bottom of the viewport after a user's action.

A user can dismiss the toast by clicking the “dismiss” icon button. If left alone, a toast will disappear after five seconds.

Hovering over a toast causes it to remain until the cursor is moved.

Placement​

Centered at the bottom of the viewport for smaller breakpoints and bottom left of the viewport for larger breakpoints.

Multiple toasts stack vertically from top to bottom with the oldest on top.

Content​

The message should be concise, specific, and use clear language:

Examples of Toast Messages:​
  1. Success Message:
    • "Saved successfully."
    • "Updated your profile."
    • "Message sent!"
  2. Error Message:
    • "Failed to save."
    • "Network error."
    • "Invalid email address."
  3. Informational Message:
    • "New message received."
    • "Reminder set."
    • "Device connected."
Why Messaging Needs to Be Concise:​
  • Visibility Duration: Toast messages appear briefly and vanish quickly, so users must grasp their content in a glance.
  • Non-intrusive: They should not disrupt the user's current task or experience.
  • Clarity: Clear and focused messages reduce confusion and help users understand actions or outcomes.
  • Minimum Length: Typically, a single word or short phrase can suffice. For example, "Saved" or "Error".
  • Maximum Length: Avoid exceeding 50-70 characters, including spaces, to ensure the message fits within the toast's visual area without wrapping or truncation.

By keeping toast messages concise and focused, you enhance the user experience by providing timely feedback that's informative yet unobtrusive.

Accessibility​

Screen Reader Support​

ARIA Roles: Implement ARIA roles such as alert for error messages and status for informational messages to inform screen reader users of the toast message type and importance.

Example:

Focus Management: Ensure that focus is managed correctly. Avoid taking focus away from the current task, but allow users to navigate to the toast message if desired.