toast

Toast

Short messages that confirm an action, like adding to the cart, with an optional action button; mount Toaster once and call toast() anywhere.

States: Default, Focus

Parts

PartFileDoes
ToastToast.vueHolds the toasts that toast() shows, short messages that confirm an action such as adding to the cart.

Styling

Install

Writes 2 files into components/ui/toast/. For agents, npx @frontic/ui docs toast prints this reference as markdown; the MCP server serves the same.

npm packages
@lucide/vue
@vueuse/core
class-variance-authority
reka-ui
vue-sonner

API reference

Toast Toast.vue

Holds the toasts that toast() shows, short messages that confirm an action such as adding to the cart. Mount it once.

PropTypeDefault
idstring—
invertbooleanfalse
themeTheme—
positionPosition—
closeButtonPositionCloseButtonPosition—
hotkeystring[]—
richColorsbooleanfalse
expandbooleanfalse
durationnumber—
gapnumber—
visibleToastsnumber—
closeButtonbooleanfalse
toastOptionsToastOptions—
offsetOffset—
mobileOffsetOffset—
dir'ltr' | 'rtl' | 'auto'—
swipeDirectionsSwipeDirection[]—
iconsToastIcons—
containerAriaLabelstring—
Recipe toastSets
base: toast 11 properties
tone: info 2 properties · 2 inherited
tone: positive 2 properties · 2 inherited
tone: warning 2 properties · 2 inherited
tone: destructive 2 properties · 2 inherited
Recipe toast-contentSets
base: toast-content 1 property
Recipe toast-actionSets
base: toast-action 12 properties · 8 inherited
focus-ringshared state 3 properties
Recipe toast-cancelSets
base: toast-cancel 12 properties · 8 inherited
focus-ringshared state 3 properties
Recipe toast-titleSets
base: toast-title 4 properties · 4 inherited
Recipe toast-descriptionSets
base: toast-description 2 properties · 2 inherited
Example
State