docs/extension-test-page
What's New

Toast

Figma Storybook GitHub

A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions. It contains at-a-glance information about outcomes and can be paired with actions.

Preview

Variants and Examples

With Duration

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.

With Self-Positioning

If you need to self-position the toast at the top center, use the d-toast-wrapper Dialtone class:

Vue API 

import { DtToast } from '@dialpad/dialtone-vue';

Slots

Name
Type
action
default

the main textual content of the toast

header

Slot for the header

icon

Props

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 v-model with this prop to update the data in your component. Supports v-model

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.

Events

Name
Type
close

Close button click event

update:open
undefined

Sync open value

Classes

Class
Applies to
Description

Accessibility

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:

  • An invalid value was entered into a form field
  • The user's login session is about to expire
  • The connection to the server was lost, local changes will not be saved

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

Toast documentation last updated Thursday, June 18, 2026