Toast

A brief, auto-dismissing notification triggered from code, not a rendered tag.

const toast = useAppToast()

toast.add({
  title: 'Your changes have been saved',
})

Props

Name	Type	Default
title	string	—
description	string	—
variant	'success' \| 'warning' \| 'error' \| 'default'	'default'
icon	string	— (no icon shown)
actions	{ label, variant?: ButtonVariant, onClick, ... }[]	—
close	boolean \| object	false

Usage

Examples

Warning

A risky-but-not-blocking outcome, like needing a second factor.

toast.add({
  title: 'Second factor required',
  variant: 'warning',
})

Error

Feedback that an action failed.

toast.add({
  title: 'Something went wrong',
  variant: 'error',
})

With icon

A deliberate glyph for a specific, recognizable event.

toast.add({
  title: 'Password updated',
  variant: 'success',
  icon: 'i-lucide-lock',
})

With actions

Auto-dismissing, but with a quick response action — variant here is this design system's own Button vocabulary, not Nuxt UI's raw color/variant.

toast.add({
  title: 'Finding marked as resolved',
  actions: [
    { label: 'Undo', variant: 'Secondary', onClick: () => { /* ... */ } },
    { label: 'Dismiss', variant: 'Ghost', onClick: () => { /* ... */ } },
  ],
})

Persistent with actions

A toast that stays until the user responds, for actions it can't auto-dismiss past.

const toast = useToast() // duration/id aren't available on useAppToast() — see its own file

toast.add({
  title: 'We use cookies to improve your experience',
  duration: 0,
  close: true,
  actions: [
    { label: 'Accept', color: 'secondary', variant: 'solid', onClick: () => { /* ... */ } },
    { label: 'Opt out', color: 'neutral', variant: 'ghost', onClick: () => { /* ... */ } },
  ],
})