Toast component is controlled via the ToastService that needs to be installed as an application plugin.

The service is available with the useToast function for Composition API or using the $toast property of the application for Options API.

Toasts are displayed by calling the add method provided by the useToast function. A single toast is specified by the Message interface that defines various properties such as severity, summary and detail.

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.

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.

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.

The toast content can be fully customized with a template to render any markup, such as links and action buttons.

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.

Setting mode to expanded always renders the stack expanded; the stacked mode stacks toasts collapsed and expands them on hover. Auto-dismiss timers still pause while the toasts are hovered.

An interactive button can be added to the toast content with a custom template, for example to let the user confirm an action.

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, you may use closeButtonProps to customize the element and override the default aria-label.

In stacked mode, moving keyboard focus into the toast group expands the stack so hidden close buttons remain reachable.

Close Button Keyboard Support