Snackbar

info

For more details about Vuetify’s usage of Snackbar component, click Snackbar page.
For more prop explanations, click Vuetify Snackbar API page.

Props

Attribute	Description	Type	Default
absolute	Applies position: absolute to the component.	boolean	false
app	Respects boundaries of—and will not overlap with—other app components like AppBar, NavigationDrawer, and Footer.	boolean	false
bottom	Aligns the component towards the bottom.	boolean	false
center	Positions the snackbar in the center of the screen, (x and y axis).	boolean	false
color	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)). You can find a list of built-in classes on the colors page.	string	undefined
contentClass	Apply a custom class to the snackbar content.	string	undefined
dark	Applies the dark theme variant to the component.	boolean	false
elevation	Designates an elevation applied to the component between 0 and 24.	number-string	undefined
multiLine	Gives the snackbar a larger minimum height.	boolean	false
outlined	Removes elevation (box-shadow) and adds a thin border.	boolean	false
rounded	Designates the border-radius applied to the component.	boolean-string	undefined
shaped	Applies a large border radius on the top left and bottom right of the card.	boolean	false
text	Applies the defined color to text and a low opacity background of the same.	boolean	false
tile	Removes the component’s border-radius.	boolean	false
timeout	Time (in milliseconds) to wait until snackbar is automatically hidden. Use -1 to keep open indefinitely (0 in version < 2.3 ). It is recommended for this number to be between 4000 and 10000.	number-string	5000
transition	Aligns the content towards the top.	boolean-string	snack-transition
value	Controls whether the component is visible or hidden.	any	undefined
vertical	stacks snackbar content on top of the actions (button).	boolean	false
left	Aligns the component towards the left.	boolean	false
top	Aligns the content towards the top.	boolean	false
right	Aligns the component towards the right.	boolean	false
visible	Visibility of Snackbar component.	boolean	true

Events

Attribute	Description
click	Trigger when you click marker on the snackbar

Samples Component

Samples Qjson

snackbars