Snackbars
The v-snackbar component is used to display a quick message to a user. Snackbars support positioning, removal delay, and callbacks.
Usage
a v-snackbar in its simplest form displays a temporary and closable notification to the user.
API
| Component | Description |
|---|---|
| v-snackbar | Primary Component |
| v-btn | Sub-component typically used for actions |
Examples
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.
Props
Timeout
The timeout property lets you customize the delay before the v-snackbar is hidden.
Variants
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.
Prepend icon
The prepend-icon prop adds an icon to the start of the snackbar.
Prepend avatar
The prepend-avatar prop adds an avatar image to the start of the snackbar.
Loading
The loading prop displays a circular progress indicator in the prepend area, useful for indicating an ongoing process.
Timer position
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.
Vertical
The vertical property allows you to stack the content of your v-snackbar.
Slots
Header
The header slot renders content above the snackbar wrapper, useful for metadata like a provider name or timestamp.
Prepend
The prepend slot overrides the default prepend area, allowing you to customize the content beyond what is possible with simple props.