<dt-toast header-text="Title" :open="showToast" :important="important" :kind="selectedKind" @close="closeEvent" > Message body with <dt-link> a link </dt-link> <template #action> <dt-button :size="200" importance="outlined" kind="muted" > Action </dt-button> </template> </dt-toast>
It's recommended to use a time of at least 6000 ms (minimum duration validated in the component) to give users enough time to read the toast. Take into account that the time necessary to read and comprehend the message could vary in users. For instance, users using assistive technology, or users with language barriers could potentially need more time to read and understand the message. If the duration is not provided the toast won't disappear automatically.
<dt-toast header-text="Title" :open="showDurationToast" @close="closeEvent" :duration="7500" > Message body with <dt-link> a link </dt-link> <template #action> <dt-button :size="200" importance="outlined" kind="muted" > Action </dt-button> </template> </dt-toast>
If you need to self-position the toast at the top center, use the d-toast-wrapper Dialtone class:
<aside class="d-toast-wrapper"> <dt-toast :header-text="title" :message="message" :open="isShown" ></dt-toast> </aside>
Avoid using toast for critical information since toast disappears automatically and make sure to provide enough time to read the message and act consequently. For best accessible user experience, the amount of time a toast displays for should be user configurable.
Using role="alert", it sets aria-live="assertive" which
means it will immediately interrupt anything currently being read by the screen reader, so use it for things
that require immediate attention such as:
Meanwhile role="status" implies aria-live="polite" which
means the toast will be read out after what's currently being has finished.
A screen reader visible only close button is added by default.
Item
|
Applies to
|
Description
|
|---|
import { DtToast } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
action | |
default | the main textual content of the toast |
header | Slot for the header |
icon |
Name
|
Default
|
Type
|
|---|---|---|
actionClass | '' | string|array|object Additional class name for the action wrapper element. |
contentClass | '' | string|array|object Additional class name for the content wrapper element. |
contentId | string Sets an ID on the content element of the component. Useful for aria-describedby
or aria-labelledby or any other reason you may need an id to refer to the content. | |
duration | null | number The duration in ms the toast will display before disappearing.
The toast won't disappear if the duration is not provided.
If it's provided, it should be equal to or greater than 6000. |
headerClass | '' | string|array|object Additional class name for the header wrapper element. |
headerId | string Sets an ID on the header element of the component. Useful for aria-describedby
or aria-labelledby or any other reason you may need an id to refer to the header. | |
headerText | string Header text of the toast. This can be left blank to remove the header from the toast entirely. | |
iconClass | '' | string|array|object Additional class name for the icon wrapper element. |
important | false |
"true"
|
"false"
Used in scenarios where the message needs to visually dominate the screen. |
kind |
"base"
|
"critical"
|
"info"
|
"positive"
|
"warning"
|
"gradient"
Severity level of the toast, could be different depending on which toast layout is used. | |
layout | 'default' |
"default"
|
"alternate"
The layout / styling you wish to use for the toast. |
message | string Message of the toast. Overridden by default slot. | |
open | false |
"true"
|
"false"
Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
after reaching the duration time, so it's convenient to use |
role | 'status' |
"status"
|
"alert"
Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
communicate an important message like an error that does not contain any interactive elements. |
showAction | true |
"true"
|
"false"
Shows the action in the toast. |
showClose | true |
"true"
|
"false"
Shows the close button in the toast. |
showIcon | true |
"true"
|
"false"
Shows the icon in the toast. |
Name
|
Type
|
|---|---|
close | Close button click event |
update:open | undefined Sync open value |
Class
|
Applies to
|
Description
|
|---|
Toast documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope