Toast

This component provides visual indications similar to alerts but is displayed at a higher elevation. These are ideal for scenarios where the user needs to be presented with an issue that may be outside the viewport.

Key Points

Toasts should use consistent styles already defined

They sit at a higher elevation than other alert components

Messages should be brief

They should be consistently positioned in the viewport

The toast should automatically dismiss after 6 seconds

Usage

Toast should indicate the status of an event that is off or outside the viewport. This component is similar to an alert component but with a higher elevation. The elevation is important as it indicates that the notification is not related to the page and is of a higher order.

The default toast message can display a generic message to the user. Toast messages should be short, ideally a single line.

Toast messages should not contain all the content of a notification, only further action is required.

Default Toast

Success

If a process has successfully been completed the success variant should be used.

Success Toast

Danger

If a process has failed then the danger variant should be used. The label should indicate where the process has failed but not attempt to display multiple error messages.

This component could be used on long forms where there are likely to be inline errors displayed outside of the viewport.

Danger Toast

Positioning

Small Screen Upward

On small to large screens toasts are positioned in the bottom center.

Small Screen Example

Large Screen Upward

On large screens, the toast is positioned at the bottom right of the viewport. The height increases if content wraps over multiple lines.

Large Screen Example

File Links

Figma Components

Toast components