Transient confirmation of something that happened.
Guidance
A toast confirms something that happened away from where the person is looking, such as a
pipeline finishing. It sits on mm-raised with shadow-float: a status icon, one sentence, an
optional action and a close button. Toasts dismiss themselves after 5 seconds; the timer pauses
while the pointer is over the toast or focus is inside it. Danger toasts stay until dismissed.
Escape closes the focused toast.
Put toasts in an mm-toaster, or call toast({ message }), which uses one document-level
toaster. The toaster announces each message (politely, or assertively for danger), so the toast
itself carries no live region.
Properties
| Property | Attribute | Type | Default | Description |
|---|
tone | tone | ToastTone | 'info' | info (default), success, warning or danger. Danger toasts never auto-dismiss. |
message | message | string | '' | The message, one sentence. |
action | action | string | '' | Label for an optional action button, e.g. "View run". Fires mm-action. |
duration | duration | number | 5000 | Milliseconds before auto-dismissal. 0 keeps the toast until closed. Ignored for danger. |
persistent | | boolean | | |
text | | string | | The message as plain text, for announcements. |
Methods
| Method | Description |
|---|
start() | Starts the auto-dismiss timer. The toaster calls this when the toast becomes visible. |
close() | Closes the toast: fires mm-dismiss, then removes it from the document. |
Events
| Event | Detail | Description |
|---|
mm-action | CustomEvent<Record<string, never>> | The action button was activated. The toast then closes. |
mm-dismiss | CustomEvent<{ reason: 'timeout' | 'close' | 'action' | 'escape' | 'api' }> | The toast closed and is about to be removed. |
Slots
| Slot | Description |
|---|
| Default | The message, if you need markup. Otherwise use the message attribute. |
CSS parts
| Part | Description |
|---|
toast | The surface. |
icon | The status icon. |
message | The message. |
action | The action button. |
close | The close button. |
Examples
Every state of mm-toast in Storybook, with keyboard and screen reader tests.