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.
Example
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. |
Do you have an idea, or want to help us improve this page? Reach out to us via email.
DTMB-DG-Support@michigan.govNeed help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.