Notification

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Basic

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

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.

                            
                        

Live

Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with .hide.

                            
                        

Translucent

Toasts are slightly translucent to blend in with what’s below them.

                            
                        

Stacking

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

                            
                        
Customise your YODA Preview in Real Time
THEME Dark & Light
CONTENT WIDTH FULL Width & Boxed