packages/docs/src/pages/en/components/snackbars.md
The v-snackbar component is used to display a quick message to a user. Snackbars support positioning, removal delay, and callbacks.
a v-snackbar in its simplest form displays a temporary and closable notification to the user.
| Component | Description |
|---|---|
| v-snackbar | Primary Component |
| v-btn | Sub-component typically used for actions |
::: info Some examples below use the contained prop to keep snackbars scoped within the example preview. In a real application you typically don't need it — snackbars render in the application overlay by default. :::
The timeout property lets you customize the delay before the v-snackbar is hidden.
Use the variant and rounded prop to apply distinct look and shape to the snackbar. Transparent variants such as tonal and outlined render with a surface background to remain legible against the page.
The prepend-icon prop adds an icon to the start of the snackbar.
<ExamplesExample file="v-snackbar/prop-prepend-icon" />The prepend-avatar prop adds an avatar image to the start of the snackbar.
<ExamplesExample file="v-snackbar/prop-prepend-avatar" />The loading prop displays a circular progress indicator in the prepend area, useful for indicating an ongoing process.
<ExamplesExample file="v-snackbar/prop-loading" />The timer prop accepts 'top' or 'bottom' to control where the progress bar is rendered. Use timer-color to change its color and reverse-timer to invert the direction.
The vertical property allows you to stack the content of your v-snackbar.
The header slot renders content above the snackbar wrapper, useful for metadata like a provider name or timestamp.
<ExamplesExample file="v-snackbar/slot-header" />The prepend slot overrides the default prepend area, allowing you to customize the content beyond what is possible with simple props.
<ExamplesExample file="v-snackbar/slot-prepend" />