Component Toast

Toasts are floating notifications that inform users about an action or process. By default, they will disappear automatically after a set time, but they can also be set to dismiss manually. Note that a toast group container is REQUIRED to implement toast components. You must place an empty toast group on the page to ensure screenreaders can detect an aria-live area upon page load, then add individual toasts as needed.

Get the UI kit

Example

By default, this toast notification will auto-dismiss after 10 seconds.

This toast notification is configured to dismiss manually.

A user can't dismiss this toast, but it will dismiss automatically after a custom timeout interval of 30 seconds.

This is a demo of a dismissible toast notification.

View code

<div>
        <som-toast id="toast1" headline="Success" color="success">
          By default, this toast notification will auto-dismiss after 10 seconds.
        </som-toast>
        <som-toast id="toast2" headline="Warning" color="warning" auto-dismiss="false">
          This toast notification is configured to dismiss manually.
        </som-toast>
        <som-toast id="toast3" headline="Error" color="danger" auto-dismiss-time={30000} dismissible="false">
          A user can't dismiss this toast, but it will dismiss automatically after a custom timeout interval of 30 seconds.
        </som-toast>
        <som-toast id="toast4" headline="Info" auto-dismiss="false">
          This is a demo of a dismissible toast notification.
        </som-toast>
      </div>

Props

Attr	Type	Default	Docs
auto-dismiss	boolean	true	This boolean property determines whether the toast will dismiss automatically or not.
auto-dismiss-time	number	10000	The timeout in milliseconds before the toast is automatically dismissed.
close-button-aria-label	string	"dismiss"	This property overrides the close button aria label.
color	"danger" \| "info" \| "success" \| "warning"	'info'	This property sets the toast container color.
dismissible	boolean	true	This boolean determines if a toast can be dismissed.
headline	string		This property sets the headline for the toast.
icon	boolean	true	This boolean property sets the visual status icon visibility.

Methods

Name	Returns	Docs
dismiss	Promise will resolve after toast is dismissed.	This public method is used to dismiss a toast.

Events

Event	Detail	Docs
toastDismissed	void	This event is emitted when the toast is dismissed.

Parts

Name	Docs
body	This part is the body text content.
close-button	This part is the close button.
headline	This part is the headline content.
icon	This part is the optional icon next to the headline.

Beta

Beta content represents a new concept that has been thoroughly tested but could potentially change based on additional user feedback.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.