Usage #
Examples #
Basic #
Toasts are displayed by calling the add and addAll method provided by the messageService. A single toast is specified by the Message interface that defines various properties such as severity, summary and detail.
Severity #
The severity option specifies the type of the message. There are four types of messages: success, info, warn and error. The severity of the message is used to display the icon and the color of the toast.
Promise #
A sticky loading toast can be shown while an async task runs, then removed and replaced with a success or error toast based on the result.
Sticky #
A toast disappears after the time defined by the life option, set sticky option true on the message to override this and not hide the toast automatically.
Custom #
The toast content can be fully customized with a template to render any markup, such as links and action buttons.
Position #
Location of the toast is customized with the position property. Valid values are top-left, top-center, top-right, bottom-left, bottom-center, bottom-right and center.
Expanded Mode #
Setting mode to expanded always renders the stack expanded; the default stacked mode stacks toasts collapsed and expands them on hover. Auto-dismiss timers still pause while the toasts are hovered.
Action #
An interactive button can be added to the toast content with a custom template, for example to let the user confirm an action.
Accessibility #
Screen Reader
Toast component use alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true".
Close element is a button with an aria-label that refers to the aria.close property of the locale API by default.
Close Button Keyboard Support
| Key | Function |
|---|---|
| enter | Closes the message. |
| space | Closes the message. |