Basic
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.
Frogetor11 mins ago
Hello, world! This is a toast message.
Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the backdrop-filterCSS property, we’ll also attempt to blur the elements under a toast.
Frogetor11 mins ago
Hello, world! This is a toast message.
Stacking
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
Frogetorjust now
See? Just like this.
Frogetor2 seconds ago
Heads up, toasts will stack automatically
Placement
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
Frogetor11 mins ago
Hello, world! This is a toast message.