Toasts
Basic
To encourage extensible and predictable toasts, we recommend a header and body.

Metrica
11 mins ago
Hello, world! This is a toast message.
Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over.

Metrica
11 mins ago
Hello, world! This is a toast message.
Stacking
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

Metrica
11 mins ago
Hello, world! This is a toast message.

Metrica
11 mins ago
Hello, world! This is a toast message.
Custom content
Alternatively, you can also add additional controls and components to toasts.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Toast Placement
Place toasts with custom CSS as you need them.

Metrica
11 mins ago
Hello, world! This is a toast message.
Custom Toast
You can use custom toast.

Charles Smith
UI/UX front end developer