Toast ​

A transient notification used to provide feedback for actions, success states, warnings, or errors.

Use the toast helper to trigger notifications. The Toast component itself is an internal building block for the toast system, not the primary public API.

Examples ​

Actions ​

API Reference ​

Show types
typescript
import type { Component } from 'vue'

export interface ToastAction {
  /** Label shown for the toast action */
  label: string

  /** Accessible text announced for the action control */
  altText?: string

  /** Callback invoked when the action is triggered */
  onClick: () => void
}

export interface ToastProps {
  /** Controls whether the toast is visible (required) */
  open: boolean

  /** Message content rendered inside the toast */
  message?: string

  /** Visual tone of the toast */
  type?: 'info' | 'success' | 'warning' | 'error'

  /** Auto-dismiss duration in milliseconds */
  duration?: number

  /** Optional custom icon rendered before the message */
  icon?: Component

  /** Whether the close button is shown */
  closable?: boolean

  /** Optional action rendered on the right side of the toast */
  action?: ToastAction
}
Prop Default Type
open*
—
boolean

Controls whether the toast is visible (required)

message
—
string

Message content rendered inside the toast

type
—
"success" | "error" | "info" | "warning"

Visual tone of the toast

duration
—
number

Auto-dismiss duration in milliseconds

icon
—
Component

Optional custom icon rendered before the message

closable
—
boolean

Whether the close button is shown

action
—
ToastAction

Optional action rendered on the right side of the toast

Event Payload
update:open
[value: boolean]

Fired when the open state changes.

action
[]
TimePickerTooltip