Toast

---

---

Anatomy

1. Container: Colored depending on style.
2. Icon: Optional for visually communication of the message.
3. Action: Optional action related to the message.
4. Message: A confirmation of what just happened.

---

Usage Guidelines

When to use this component

• Provide non-critical feedback about a completed or ongoing action
• Communicate low-priority updates without interrupting the user
• Offer an optional, secondary action (e.g. undo)

For example, after a user verified their phone number
To communicate that the phone number was successfully verified after navigation to a different screen or leaving a flow.

When not to use this component

• For critical messages or errors → Use a dialog instead
• When user action is required → Use a dialog instead
• When the message is related to a form element → Use feedback instead
• For system messages that remain relevant for the user indefinitely → Use a banner instead

For example, when loosing connection to the server
The lost connection may remain a problem after the toast message has disappeared. Therefore, it’s more appropriate to show a banner until the connection is restored.

---

Best Practices

---

General Component Behaviors

Appears temporarily
The message is automatically dismissed after a set timeout.

Does not disrupt the user experience
Interaction with the component is optional. Users can continue their journey uninterrupted without having to interact with the toast.

---

Variants

Without action (default)

By default toasts have a close button instead of an action because the goal is to inform without disrupting the user experience.

With action

Actions are optional for users and must be related to an event that happened. For example, undoing a removal event.

---

Styles

Default
Informs the user of the successful outcome of an action or process.

Error
Informs the user of an unsuccessful outcome of an action or process.

---

Placement

At the bottom center of the screen
Toasts should be placed at the bottom of the UI, floating above the main content. The offset is determined by the minimum of the safearea.insets.bottom and toast/offset

 

Maximum width
The width of toasts is restricted to the device width minus the toast/offset on either side on either side.

Above the Toolbar
Toasts should appear above Toolbars to avoid interrupting the user’s interactions.

Above TabBar
Toasts should appear above the TabBar to allow the user to navigate the app uninterupted.

Only one toast at a time
When displaying another toast when there is still a toast visible, the new toast replaces the previous toast.

---

Content Guidelines

The message copy should:

• Confirm just what happened
• Use the pattern verb + noun
• Be 3 words or less (excluding dynamic content)
• Have no period at the end

The button copy should:

• Describe the action (users should know what will happen just by reading the button label)
• Relate the action to the event or process that was confirmed in the message
• Start with a verb, like “Book” or “Undo”
• Be 2 words or less (ideally 1)
• Use sentence case (only capitalize the first letter of the first word)
• Have no period at the end

For further information, see the Content Styleguide.