Toast

COMPONENTS

Toast is a lightweight and easily customizable Alert message that appears at a prescribed location of an application window.

View GSUI Toolkit Documentation (Internal Only)

View in Figma (Internal Only)

Anatomy

Leading icon
Message
Button
Close icon
Alert container

Variations

Dismissible

Dismissible toasts display until the user selects the close icon. Toasts can be set to automatically dismiss after a specified period of time, but can be dismissed sooner if the user selects the close icon.

Programmatically dismissible

Programmatically dismissible toasts are dismissed when a user takes a certain action. For example, when a user is given a task to approve something.

Appearance

Status

Toasts offer the following messaging states — none, information, success, warning, or error.

Behaviors

Postion

Toasts can be placed in the following positions on a screen— top left, top, top right, left, center, right, bottom left, bottom, or bottom right.

Sizes

Toasts can be displayed in large, medium, and small sizes.

Guidelines

Toasts are meant to be short and brief. If you need a longer message use an Alert.

Avoid using toasts for critical messages that a user must see. Use an Alert instead.

Mobile Guidelines

Use a large size for toasts that have actionable areas and need a larger tap area.

Alert

Alerts display a status update, reflecting a user or system action.

Contents