Toast

The Toast component provides a way to show live, time-sensitive feedback to users, which includes updates or changes to the system status. To display the Toast component use the ToastContainer along with the showToast function. The function accepts ToastOptions as an argument, allowing you to pass various configurations, and returns the corresponding toast id.

Use toasts for displaying short-lived notifications or messages to the user.

OverviewPropertiesUsage

Types

Toasts come in four types:

Default

• Use the default type for generic information without positive or negative meaning—for example, an automatically upgraded instance during a process.
• Default Toasts close automatically.

Success

• Use the success type for positive feedback or to let users know that an action or process was successful. For example, when an access request is triggered and sent to an administrator.
• Success Toasts close automatically.

Warning

• Use the warning type to inform users about a potential issue or something that could cause a problem—for example, unessential failed processes.
• Warning Toasts don't close automatically.

Critical

• Use the critical type for negative feedback or to let users know about issues that require immediate attention—for example, a failed action or process.
• Critical Toasts don't close automatically.

Position

Align Toasts on the bottom left of the screen by default. If this overlays essential content in your app, alternative positions are available. However, use these alternatives sparingly, as they're exceptions to the rule.

Toast vs. inline messages

Toast

• Use Toasts for subtle feedback that should always be visible, regardless of where the user is in an app. The information doesn't need to be related to the user's current context.
• Always use Toasts for temporary messages that shouldn't cause a significant disruption in the user's workflow.
• Avoid greeting users with Toasts when they open an app or page. Instead, you can use inline messages to inform users about what has happened. For example, when warning users about a system maintenance scheduled for a specific date.

Inline messages

• Use inline messages to communicate contextual information prominently. For example, at the beginning of a form, to warn the user about an impactful change that could happen.

Content guidelines

General

• The title should state the following action or most important information for the user. Keep the title to five words or fewer. Titles don't get periods.
• The body text should give the necessary details but be short and simple. Aim for a maximum of one sentence and put a period at the end.
• Use sentence case in both the title and the body text.

Message content

• Use the same word to refer to the same thing. Don't use different words for the same thing.
• If you add an action button in a toast, try to repeat the keyword from the title or body text in the button text. For example, if the title says Delete this notebook? the button text could be Delete notebook.
• When confirming an action is complete, put the most meaningful word or action first. For example, Deleted message, not Message deleted.
• Don't add successfully or unsuccessfully to confirmation messages. For example, just write Saved (not Saved successfully).
• For critical or warning messages, state the cause of the issue and suggest a potential action or give a support link.