Toast
Toast notices, sometimes called snackbars, are time-based messages that appear based on the user or other users actions. They contain at-a-glance information about outcomes. Sometimes they are paired with actions.
Breakdown
Toast messages have a content area, icon, message, and possibly metadata. They are placed within a wrapper.
Styles
Chat
Shane Holmes, 12:26pm
Hey everyone, how was your weekend?
.example-toast-wrapper { .d-toast-wrapper ( ) ; } .example-toast-- { { name } } { .d-toast-- { { name } } ( ) ; } .example-toast__icon-- { { name } } { .d-toast__icon-- { { name } } ( ) ; }
Viewing
Annie Wu is viewing this call.
.example-toast-wrapper { .d-toast-wrapper ( ) ; } .example-toast-- { { name } } { .d-toast-- { { name } } ( ) ; } .example-toast__icon-- { { name } } { .d-toast__icon-- { { name } } ( ) ; }
Info
Voice Intelligence has been turned on for this call.
.example-toast-wrapper { .d-toast-wrapper ( ) ; } .example-toast-- { { name } } { .d-toast-- { { name } } ( ) ; } .example-toast__icon-- { { name } } { .d-toast__icon-- { { name } } ( ) ; }
Error
We were unable to send invites. Please try again.
.example-toast-wrapper { .d-toast-wrapper ( ) ; } .example-toast-- { { name } } { .d-toast-- { { name } } ( ) ; } .example-toast__icon-- { { name } } { .d-toast__icon-- { { name } } ( ) ; }
Success
Invites sent to Fred Schmidt , Freda Clarkson , and 1 other.
.example-toast-wrapper { .d-toast-wrapper ( ) ; } .example-toast-- { { name } } { .d-toast-- { { name } } ( ) ; } .example-toast__icon-- { { name } } { .d-toast__icon-- { { name } } ( ) ; }
Organizer
Isabell Gomez is now a co-host.
.example-toast-wrapper { .d-toast-wrapper ( ) ; } .example-toast-- { { name } } { .d-toast-- { { name } } ( ) ; } .example-toast__icon-- { { name } } { .d-toast__icon-- { { name } } ( ) ; }