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
Emits
close[]pause[]resume[]Types
interface ToastAction {
label: string;
color?: ToastColor;
variant?: ToastVariant;
onClick?: (event: MouseEvent) => void;
}type ToastColor = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";