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

Dastone
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.

Dastone
11 mins ago
Hello, world! This is a toast message.
Placement
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

Dastone
11 mins ago
Hello, world! This is a toast message.
Placement
For systems that generate more notifications, consider using a wrapping element so they can easily stack.

Dastone
just now
See? Just like this.

Dastone
2 seconds ago
Heads up, toasts will stack automatically
Custom Toast
You can use custom toast.

Dastone
Mannat-Themes
Followers 51k
Following 200
Custom Toast
You can use custom toast.

Charles Smith
UI/UX front end developer