A short, temporary message that appears at the edge of the screen and dismisses itself.
Selector: mui-toast-container
Import
import { Toast, ToastContainer, ToastService } from '@mushilu-san/ui/feedback';
PreviewCode
Loading example…
Overview
Add one mui-toast-container to the app, then call ToastService from anywhere to show a toast. info, success, warning and danger set the variant, and duration sets how long it stays (0 keeps it until dismissed).
Hovering or focusing a toast pauses its timer. Info and success toasts are announced politely. Warning and danger toasts are announced assertively.
When to use
Confirming an action that does not need a response, such as "Link copied".
Reporting a background result the user does not have to act on.
When not to use
A message the user must read before continuing. Use an alert or dialog. Use Alert instead.
An error that belongs to one field. Show it next to the field. Use Form field instead.
Guidelines
Do
Keep the message to one short sentence.
Offer an action in the toast only when it saves the user effort.
Don't
Do not show toasts for errors the user must fix.
Do not stack many toasts. Show the latest result.
Accessibility
Roles and attributes
Element
Role
Notes
container
region
aria-label from label, default "Notifications". A polite and an assertive live region; warning and danger use the assertive one.
toast
—
Announced through the live region, not focused.
Keyboard
Keys
Action
TabShift+Tab
Moves focus to a toast dismiss button when one is shown.
Do not rely on a toast for information that must stay on screen. Keep the result on the page too.
API
Toast
Selector: mui-toast
Name
Type
Default
Description
variant
'info' | 'danger' | 'success' | 'warning'
'info'
Meaning of the toast: `info`, `success`, `warning` or `danger`. Default `info`.
message
string
''
Body text of the toast.
heading
string | undefined
—
Optional short heading above the message.
duration
number
5000
ms before auto-dismiss; 0 disables the timer.
Name
Type
Description
dismissed
void
Emits when the toast is dismissed, by timer or by the user.
Mushilu-San UI