VSnackbar API

ads via vuetify

Props

name	type	default
`absolute`	boolean	false
Applies position: absolute to the content element.
`activator`	Element \| (string & {}) \| 'parent' \| ComponentPublicInstance	undefined
Explicitly sets the overlay’s activator.
`activator-props`	unknown	{}
Apply custom properties to the activator.
`attach`	string \| boolean \| Element	false
Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default.
`close-delay`	string \| number	undefined
Milliseconds to wait before closing component. Only applies to hover and focus events.
`close-on-back`	boolean	false
Closes the overlay content when the browser’s back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing.
`close-on-content-click`	boolean	false
Closes component when you click on its content.
`collapsed`	{ width: number; height: number }	undefined
Alters the element size fit behind front snackbar in the queue.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`contained`	boolean	false
Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.).
`content-class`	any	undefined
Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the attach prop is provided) and is not targetable by classes passed directly on the component.
`content-props`	any	undefined
Apply custom properties to the content.
`disabled`	boolean	false
Removes the ability to click or target the component.
`eager`	boolean	false
Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
`height`	string \| number	undefined
Sets the height for the component.
`loading` New in v4.0.0	boolean	false
Displays a loading spinner in the prepend area.
`location`	Anchor	'bottom'
Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both…
`location-strategy`	'static' \| 'connected' \| LocationStrategyFunction	'static'
A function used to specifies how the component should position relative to its activator.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`model-value`	boolean	false
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`opacity`	string \| number	undefined
Sets the opacity of the scrim element. Only applies if `scrim` is enabled.
`open-delay`	string \| number	undefined
Milliseconds to wait before opening component. Only applies to hover and focus events.
`open-on-click`	boolean	undefined
Activate the component when the activator is clicked.
`open-on-focus`	boolean	undefined
Activate the component when the activator is focused.
`open-on-hover`	boolean	false
Activate the component when the activator is hovered.
`origin`	Anchor \| 'auto' \| 'overlap'	'auto'
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
`position`	'fixed' \| 'static' \| 'relative' \| 'absolute' \| 'sticky'	undefined
Sets the position for the component.
`prepend-avatar` New in v4.0.0	string	undefined
Displays an avatar in the prepend area using the provided image source.
`prepend-icon` New in v4.0.0	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Displays an icon in the prepend area.
`queue-gap`	number	undefined
Sets the offset to show collapsed snackbars as a stack. Requires value in pixels.
`queue-index`	number	undefined
The index position of this snackbar within a queue.
`reverse-timer` New in v4.0.0	boolean	false
Reverses the direction of the timer progress bar, filling up instead of depleting.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`target`	\| Element \| (string & {}) \| 'parent' \| 'cursor' \| ComponentPublicInstance \| [number, number]	undefined
For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.
`text` New in v3.4.0	string	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`timeout`	string \| number	5000
Time (in milliseconds) to wait until snackbar is automatically hidden. Use `-1` to keep open indefinitely. It is recommended for this number to be between `4000` and `10000`. Changes to this property will reset the countdown.
`timer` New in v3.4.0	boolean \| 'top' \| 'bottom'	false
Display a progress bar that counts down until the snackbar closes. Use `bottom` to change the default placement.
`timer-color` New in v4.0.0	string	undefined
Sets the color of the timer progress bar.
`title`	string	undefined
Specify a title text for the component.
`transition`	string \| boolean \| (TransitionProps & { component: Component })	'v-snackbar-transition'
Sets the component transition. Can be one of the built in or custom transition. Supports special location-aware mode with slide-auto and scroll-auto
`variant`	'text' \| 'flat' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'elevated'
Applies a distinct style to the component.
`vertical`	boolean	false
Stacks snackbar content on top of the actions (button).
`width`	string \| number	undefined
Sets the width for the component.
`z-index`	string \| number	2000
The z-index used for the component.

Events

name	type
`update:modelValue`	[boolean]
Event that is emitted when the component’s model changes.

Slots

{ isActive: Ref<boolean, boolean> }

{ isActive: boolean; props: Record<string, any> }

never

never

never

never

never

`actions`
Used to bind styles to v-btn to match MD2 specification.
`activator`
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation.
`default`
The default Vue slot.
`header` New in v4.0.0
Slot for custom content above the snackbar body.
`prepend` New in v4.0.0
Adds an item outside the input and before input content.
`text`
Slot for the component’s text content.
`title`
Slot for the component’s title content.

Exposed

HTMLElement

() => void

HTMLElement

boolean

boolean

HTMLElement

HTMLElement

HTMLElement | [number, number]

(e: Event) => void

`activatorEl`
Ref to the current activator element.
`animateClick`
Function invoked when user clicks outside.
`contentEl`
Ref to the current content element.
`globalTop`
Used by activator to determine a components position in the global stack order.
`localTop`
Used by activator to determine a components position in the local stack order.
`rootEl`
Ref to the root v-overlay element.
`scrimEl`
Ref to the current scrim element.
`target`
Ref to the current target element.
`updateLocation`
Function used for locationStrategy positioning.

SASS Variables

name	default
`$snackbar-absolute-z-index`	1
`$snackbar-action-margin`	8px
`$snackbar-background`	rgb(var(--v-theme-surface-variant))
`$snackbar-border-radius`	settings.$border-radius-root
`$snackbar-btn-padding`	0 8px
`$snackbar-color`	rgb(var(--v-theme-on-surface-variant))
`$snackbar-content-padding`	14px 16px
`$snackbar-elevation`	2
`$snackbar-fallback-background`	rgb(var(--v-theme-surface))
`$snackbar-font-size`	tools.map-deep-get(settings.$typography, 'body-medium', 'size')
`$snackbar-font-weight`	tools.map-deep-get(settings.$typography, 'body-medium', 'weight')
`$snackbar-letter-spacing`	tools.map-deep-get(settings.$typography, 'body-medium', 'letter-spacing')
`$snackbar-line-height`	tools.map-deep-get(settings.$typography, 'body-medium', 'line-height')
`$snackbar-plain-opacity`	.62
`$snackbar-prepend-margin-inline`	16px 12px
`$snackbar-title-font-weight`	700
`$snackbar-transition-scale`	.8
`$snackbar-variants`	( $snackbar-background, $snackbar-color, $snackbar-elevation, $snackbar-plain-opacity, 'v-snackbar' )
`$snackbar-vertical-action-margin-bottom`	8px
`$snackbar-wrapper-margin`	8px
`$snackbar-wrapper-max-width`	672px
`$snackbar-wrapper-min-height`	48px
`$snackbar-wrapper-min-width`	344px
`$snackbar-wrapper-padding`	0
`$snackbar-z-index`	10000

#VSnackbar API

VSnackbar API