Show Toast
Last updated
Last updated
Use a toast message to confirm a user's action and provide feedback. Toasts are overlaid notifications that stack horizontally and can be dismissed by the user.
Use a toast for one of these types of responses:
Info: inform users that their actions have triggered a process, and they may have to wait for completion before proceeding.
Success: Confirm a successful or completed action.
Warning: Warning toasts inform users of potential issues related to their actions and guide them to prevent future problems.
Error: Communicate an issue preventing a user from completing their current action and can be fixed within their current flow.
In general, use a toast interaction in response to user action. To decide whether you should use Toasts or another type of messaging, jump to Toasts vs. Alert Modal vs. Confirm interaction.
| Property | Description |
|---|---|
Title | Text that will be displayed in the header. |
Message | Main content message for your alert box. |
Variant | Appearance of the alert modal. With or without a header. |
Mode | Determines how persistent the toast is. Choose between |
Dismissible: The toast message is dismissed automatically after 5 seconds. Users can close it.
Pester: The toast message is dismissed automatically after 5 seconds. Users can't close it.
Sticky: The toast message is displayed until dismissed, no duration applies. This forces the user to acknowledge info without blocking other interactions on the page.
