Overview
A message toast is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.
When to Use
1
do
false
Recommended
- To display a short success message.
- To avoid interruption while users are performing an action.
- To confirm a successful action.
1
dont
false
Not Recommended
- To display an error or warning message.
- To interrupt users while they are performing an action.
- To make sure that users read the message before they leave the page.
- To copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.
Layout
Position
The message toast is always centered horizontally at the bottom of the screen.
Anatomy
We recommend setting it to no more than 35 rem. For longer success messages, adjust the width of the toast to make the message easy to read (for example, on a desktop device).