Components / Overlays

Toast

Brief, non-blocking notifications for actions and status updates.

Preview

Use cases

Save confirmation

Announce completion after an asynchronous save without interrupting the current task.

Recoverable failure

Keep an error visible and offer a retry action when recovery is possible.

Usage example

Vue

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
import ToastProvider from './components/ui/toast/ToastProvider.vue'
import ToastViewport from './components/ui/toast/ToastViewport.vue'
</script>

<template>
  <ToastProvider
    v-slot="{ toast }"
    :messages="{ dismiss: 'Dismiss notification', viewportLabel: 'Notifications' }"
  >
    <Button @click="toast.success('Project saved', {
      description: 'Your changes are available to the team.',
    })">
      Save project
    </Button>
    <ToastViewport position="bottom-right" />
  </ToastProvider>
</template>

More examples

Mount the notification region

Put one provider and viewport near the app root.

Mount the notification region

<script setup lang="ts">
import ToastProvider from './components/ui/toast/ToastProvider.vue'
import ToastViewport from './components/ui/toast/ToastViewport.vue'
const messages = { dismiss: 'Dismiss notification', viewportLabel: 'Notifications' }
</script>
<template>
  <ToastProvider :messages="messages">
    <RouterView />
    <ToastViewport position="bottom-right" />
  </ToastProvider>
</template>

Report a result

Call useToast from a descendant of ToastProvider.

Report a result

<script setup lang="ts">
import { useToast } from './components/ui/toast/useToast'
import Button from './components/ui/button/Button.vue'
const toast = useToast()
async function save() {
  try {
    await fetch('/api/project', { method: 'POST' })
    toast.success('Project saved')
  } catch {
    toast.error('Could not save the project', { duration: 0 })
  }
}
</script>
<template><Button @click="save">Save project</Button></template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Toast
Name	Type	Default or requirement
`duration / visible limit`	number	5000 / 5
`position`	top-left \| top-center \| top-right \| bottom-left \| bottom-center \| bottom-right	bottom-right
`messages`	{ dismiss; viewportLabel }	required
`toast variants`	default \| success \| warning \| destructive \| info	default
`duration: 0`	persistent toast	—

The newest toast appears at the bottom of a stack. Hover or focus the stack to reveal older notifications. Set the visible limit to control how many can appear at once.

Implementation notes

The provider limits visible notifications and queues overflow without losing alerts.
Use an existing ID with toast.update or a creation call to update rather than duplicate a notification.

Accessibility and localization

Provide localized dismiss and viewport labels through messages.
Use routine variants for routine outcomes; destructive notifications make assertive announcements.