Loading navigation…
User
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 | Type | Default | Description |
|---|---|---|---|
|
| — | — |
|
|
| Whether to show the close button |
|
|
| Position of the snackbar on the screen |
|
|
| — |
| 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 | SnackbarType.Default | Type of snackbar. Options: Default, Info, Success, Error, Warning. |
id | Optional unique identifier for the snackbar (useful for programmatic dismissal). |
Interactive examples and edge cases for this component are in Storybook.
Include SnackbarManager 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 <SnackbarManager /> to avoid duplicate Sonner toasters (which would repeat every toast).
Use useSnackbar and a button. The shell SnackbarManager displays the toast.
Configure where snackbars appear with the position prop on your single SnackbarManager at the app root. Use one manager only; mounting several SnackbarManager / Sonner Toaster instances (for example in live previews) causes duplicate notifications.
On this docs site, the shell uses SnackbarPosition.BottomCenter, so interactive examples above show toasts there.
TopLeft, TopCenter, or TopRight:
BottomLeft, BottomCenter, or BottomRight:
Hide close buttons for snackbars that must be read.
Live previews on this page use the app shell’s manager (close button enabled by default).
Multiple snackbars stack automatically when shown in sequence.
Use different types to convey semantic meaning.
Control how long snackbars remain visible.
Dismiss snackbars programmatically using their IDs.
Add descriptive text below the title.
Include an action link button for additional options.
Open links in a new tab or window.
Provide a custom click handler for the action link.
On this page