Intro

A toast message is an indicator that appears briefly in the center of the screen in response to a user action. This type of feedback is intended to show that the user’s action has been processed and completed.

Toast message on a compact screen (left) and a regular screen (right)

Usage

Use a toast message when a certain user action is taken and brief, non-intrusive feedback is needed as a result of the action.

Don't

Don’t use a toast message to convey important information.

Keep toast messages short, concise, and under three lines to confirm user actions or provide temporary status updates.
Limit user interaction through links or buttons since toast messages only appear temporarily and dismiss automatically.

Positive example of a concise toast message

Negative example of a toast message with more than three lines of text

Positive example of an optional icon in a toast message

Negative example of using links or buttons in a toast message

Anatomy

A. Label

A toast message must include a label to clearly convey temporary confirmation of a user action or provide system feedback.

B. Icon (Optional)

An optional icon is supported in a toast message to enhance message clarity and communication.

Toast message anatomy

Behavior and Interaction

Placement

Absolute Position

By default, a toast message appears at the center of a screen.

Absolute position of a toast message

Relative Position

The position is customizable vertically and can be set to a height that is relative to any other components on a screen. The horizontal position is always centered.