A toast is a non-modal dialog that appears in response to a system-level action.

The display of the toast should be toggled using the hidden property. Please refer to the Dialog Transitions section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the toast-dialog--transition modifier class will opt into a transition that slides in on show, and fades out on hide.

NOTE : A toast is non-modal and therefore should not capture or trap keyboard focus when opened. Keyboard users require a way to quickly access the actions within the toast. This is achieved via the accesskey attribute.

Default Toast

The default toast displays a single, primary call-to-action.

Toast Secondary Action

A secondary action is also supported.