Snackbar
Headless compound component for toast and snackbar notifications. Pairs with useNotifications for queue-driven stacks with auto-dismiss and pause on hover.
Usage
A single snackbar — render directly when you control the lifecycle yourself.
Anatomy
<script setup lang="ts">
import { Snackbar } from '@vuetify/v0'
</script>
<template>
<!-- Standalone -->
<Snackbar.Portal>
<Snackbar.Root>
<Snackbar.Content />
<Snackbar.Close />
</Snackbar.Root>
</Snackbar.Portal>
<!-- Queue-driven -->
<Snackbar.Portal>
<Snackbar.Queue>
<Snackbar.Root>
<Snackbar.Content />
<Snackbar.Close />
</Snackbar.Root>
</Snackbar.Queue>
</Snackbar.Portal>
</template>Examples
Notification queue
Snackbar.Queue connects to useNotifications and exposes queue items newest-first. Snackbar.Close auto-wires dismiss to the nearest Snackbar.Root — no @click needed.
Inside a Snackbar.Queue, clicking Snackbar.Close permanently removes the notification from both the queue and the registry. To remove from the toast surface while keeping the notification in the inbox, call ticket.dismiss() directly on the NotificationTicket.
Recipes
ARIA role
Set role directly on Snackbar.Root to control how screen readers announce the notification:
<template>
<!-- Polite — waits for user to be idle -->
<Snackbar.Root role="status">
<Snackbar.Content>Changes saved</Snackbar.Content>
<Snackbar.Close />
</Snackbar.Root>
<!-- Assertive — interrupts immediately -->
<Snackbar.Root role="alert">
<Snackbar.Content>Build failed — check logs</Snackbar.Content>
<Snackbar.Close />
</Snackbar.Root>
</template>Inline rendering
Pass :teleport="false" to render the portal inline instead of teleporting to <body>. Useful in docs, Storybook, or scoped container layouts:
<template>
<div class="relative h-48">
<Snackbar.Portal :teleport="false" class="absolute bottom-4 right-4">
<Snackbar.Root>
<Snackbar.Content>Changes saved</Snackbar.Content>
<Snackbar.Close />
</Snackbar.Root>
</Snackbar.Portal>
</div>
</template>Accessibility
| Concern | Implementation |
|---|---|
| Live region | Snackbar.Root defaults to role="status". Override with role="alert" for urgent notifications. No aria-live on Portal to avoid nesting conflicts. |
role="status" | Implicit aria-live="polite" — screen reader waits for idle. Use for confirmations and info. |
role="alert" | Implicit aria-live="assertive" — screen reader interrupts. Use for errors and warnings. |
| Close button | aria-label="Close" hardcoded on Snackbar.Close. |
| Timing | Auto-dismiss pauses on hover and focus (WCAG 2.2.1). Tabbing into a snackbar pauses the queue; focus leaving the container resumes it. |
| Focus | No focus trap — snackbars are non-modal. |
Snackbar.Root
Props
Events
dismiss
[id: ID]Slots
default
SnackbarRootSlotPropsSnackbar.Close
Props
Slots
default
SnackbarCloseSlotPropsSnackbar.Portal
Props
Slots
default
SnackbarPortalSlotPropsSnackbar.Queue
Props
Slots
default
SnackbarQueueSlotProps