Feedback

Toast

A single dismissible notification, rendered by `Toaster`.

html
<UiToast />

Title

title is the one line a toast really needs — what happened, in the past tense, short enough to read at a glance. Toasts aren't rendered directly: you call toast.add() and the single Toaster mounted in app.vue renders them, so every prop on this page is a key in that object.

Toasts render through a single global <UiToaster /> mounted once in app.vue — calling useToast().add() from anywhere in the app pushes into that same shared list.

Description

description is the second line under the title, for the detail that makes the title actionable — which file, which date, what happens next. Leave it out when the title already says everything; a toast is read in passing, not studied.

Icon

icon puts a glyph at the start of the toast, ahead of the text. It's the fastest part to read, so match it to the event rather than the tone — calendar for something scheduled, trash for something deleted — and let color carry whether the news is good.

Color

color themes the toast's icon, ring and progress bar. It's how a reader tells a confirmation from a failure before reading either — so reserve error for things that actually went wrong.

Orientation

orientation lays the toast out as a stack (vertical, the default) or a row (horizontal). The row puts actions beside the text instead of under it, which reads better when there's a single short button and no description competing for the width.

Close

close shows the dismiss button in the corner, and is on by default. Turning it off only makes sense for a toast that will definitely expire on its own — a false close together with duration: 0 leaves a notification nobody can get rid of.

Close icon

closeIcon swaps the glyph inside the dismiss button. Worth changing only to match an icon set you use elsewhere for dismissal — the default close is what most readers are already looking for.

Actions

actions are buttons rendered alongside the content, each a label with an optional color, variant and onClick. Keep it to one — a toast is a passing thing, and the classic case is the single “Undo” that makes a destructive action safe to take without a confirmation dialog.

Duration

duration is how long the toast stays up, in milliseconds. Zero pins it open until it's dismissed, which is the right choice for anything that failed — an error that vanishes after five seconds is an error nobody read.

Progress

progress draws the bar that drains as duration runs down, so the toast visibly announces how long it has left. It has nothing to show on a toast with duration: 0; turn it off when the countdown would be more distracting than useful.

Pulse

pulse flashes a brief highlight ring whenever its value changes — it's a signal, not a setting, so pass something that differs each time such as Date.now(). It's what makes a repeated event visible on a toast that's already on screen, which is why re-adding a toast with the same id flashes rather than stacking a duplicate.

Reusing the same id on add() flashes/updates the existing toast in place instead of stacking a duplicate.


API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
string
The title displayed in the toast.
string
The description displayed below the title in the toast.
string
The icon displayed at the start of the toast.
ToastColor
'neutral'
"vertical" | "horizontal"
'vertical'
boolean
true
string
Overrides the icon used for the close button.
ToastAction[]
Action buttons rendered alongside the toast content.
number
5000
boolean
true
number
Changing this value re-triggers a brief highlight ring animation on the toast.

Emits

Event
Payload
Description
close
[]
pause
[]
resume
[]

Types

ts
interface ToastAction {
    label: string;
    color?: ToastColor;
    variant?: ToastVariant;
    onClick?: (event: MouseEvent) => void;
}
ts
type ToastColor = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";