API and Development
Snackbar displays temporary notification messages that appear on screen to inform users about actions, errors, or other system feedback. Snackbars automatically dismiss after a duration or can be manually closed. Snackbar provides a flexible notification system built on Sonner, supporting multiple types, positions, and configurations. Snackbars appear temporarily to communicate important information without interrupting the user's workflow. They support titles, descriptions, action links, and custom durations with full keyboard and screen reader accessibility.
| Name | Default | Description |
|---|---|---|
title | required | The main message text displayed in the snackbar. |
description | Optional secondary text displayed below the title. | |
linkText | Text for an optional action link button. Requires linkUrl. | |
linkUrl | URL for the optional action link. Requires linkText. | |
onClick | Custom click handler for the action link. If not provided, defaults to opening linkUrl. | |
onDismiss | Called when the snackbar is dismissed manually (close button, swipe, or dismiss(id)). Not called for action-button clicks or auto-close. | |
onAutoClose | Called when the snackbar auto-closes after duration. Sonner pauses this clock while hovered or while the document is hidden. | |
external | false | Whether the link should open in a new tab/window. |
duration | 5000 | Duration in milliseconds before the snackbar automatically dismisses. |
type | ToastSeverity.Default | Type of snackbar. Options: Default, Info, Success, Error, Warning. |
id | Optional unique identifier for the snackbar (useful for programmatic dismissal). |
Toaster in your application root to enable snackbar functionality. This docs app already mounts one manager in the shell, so live previews on this page omit <Toaster /> to avoid duplicate Sonner toasters (which would repeat every toast).
toast and a button. The shell Toaster displays the toast.
position prop on your single Toaster at the app root. Use one manager only; mounting several Toaster / Sonner Toaster instances (for example in live previews) causes duplicate notifications.
On this docs site, the shell uses ToastPosition.BottomCenter, so interactive examples above show toasts there.
TopLeft, TopCenter, or TopRight:
BottomLeft, BottomCenter, or BottomRight: