Snackbar

The v-snackbar component is used to display a quick message to a user. Snackbars support positioning, removal delay and callbacks.

Usage

The standard snackbar is useful for calling attention to some function that has just happened.

API

v-snackbar
Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
auto-height
Default
false
Type
boolean

Makes snackbar height dynamic

Name
bottom
Default
false
Type
boolean

Align the component towards the bottom

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
left
Default
false
Type
boolean

Align the component towards the left

Name
multi-line
Default
false
Type
boolean

Makes the snackbar higher (mobile)

Name
right
Default
false
Type
boolean

Align the component towards the right

Name
timeout
Default
6000
Type
number

Time (in milliseconds) to wait until snackbar is automatically hidden. Use 0 to keep open indefinitely.

Name
top
Default
false
Type
boolean

Align the content towards the top

Name
value
Default
undefined
Type
any

Controls visibility

Name
vertical
Default
false
Type
boolean

Stacks snackbar content vertically (mobile)

Examples

Contextual

You can also apply a color to the snackbar to better fit your implementation.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore