Toast
Toast is used to display messages in an overlay.
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.
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.
Stack #
Setting mode to stack displays toasts in a stacked layout. Toasts visually overlap with a subtle scale effect and expand on hover to reveal all messages. Use stackGap to control spacing and stackVisibleLimit to set the maximum number of visible toasts.
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.
Multiple #
Multiple toasts are displayed by passing an array to the showAll method of the messageService.
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.
Template #
Templating allows customizing the content where the message instance is available as the implicit variable.
Headless #
Headless mode allows you to customize the entire user interface instead of the default elements.
Responsive #
Toast styling can be adjusted per screen size with the breakpoints option. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the styles per screen.
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. |
