Show Toast

Overview

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.

Specifications

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, Pester and Sticky.

Mode definition

• 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.