BlogPlaygroundOne

VSnackbarQueue 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.

closable
New in v4.0.0
string | boolean

false

Adds a dismiss button that closes the active snackbar.

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.

close-text
New in v4.0.0
string

'$vuetify.dismiss'

The text used in the close button when using the closable prop.

collapsed
boolean

false

Puts the visible snackbars behind each other (expands on hover).

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.

display-strategy
'overflow' | 'hold'

'hold'

Determines how new snackbars are handled when the queue is full. hold (default) keeps new messages queued until a slot opens. overflow dismisses the oldest snackbar to make room for the new one.

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.

gap
New in v4.0.0
string | number

8

Sets the gap between stacked snackbars. Requires value in pixels.

height
string | number

undefined

Sets the height for the component.

loading
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
(
  | string
  | ({
      title: string
      text: string
      class: any
      height: string | number
      maxHeight: string | number
      maxWidth: string | number
      minHeight: string | number
      minWidth: string | number
      width: string | number
      location: Anchor
      position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'
      absolute: boolean
      rounded: string | number | boolean
      tile: boolean
      theme: string
      color: string
      variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
      disabled: boolean
      prependIcon:
        | string
        | (string | [string, number])[]
        | (new () => any)
        | FunctionalComponent
      loading: boolean
      transition:
        | string
        | boolean
        | (TransitionProps & { component: Component })
      vertical: boolean
      closeOnBack: boolean
      contained: boolean
      contentClass: any
      contentProps: any
      opacity: string | number
      zIndex: string | number
      target:
        | Element
        | (string & {})
        | 'parent'
        | 'cursor'
        | ComponentPublicInstance
        | [number, number]
      closeOnContentClick: boolean
      eager: boolean
      locationStrategy: 'static' | 'connected' | LocationStrategyFunction
      origin: Anchor | 'auto' | 'overlap'
      attach: string | boolean | Element
      prependAvatar: string
      queueGap: number
      queueIndex: number
      reverseTimer: boolean
      timer: boolean | 'top' | 'bottom'
      timerColor: string
      timeout: string | number
    } & { style: any } & {
      collapsed: { width: number; height: number }
      promise: Promise<unknown>
      success: (
        val: unknown,
      ) => {
        title: string
        text: string
        class: any
        height: string | number
        maxHeight: string | number
        maxWidth: string | number
        minHeight: string | number
        minWidth: string | number
        width: string | number
        location: Anchor
        position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'
        absolute: boolean
        rounded: string | number | boolean
        tile: boolean
        theme: string
        color: string
        variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
        disabled: boolean
        prependIcon:
          | string
          | (string | [string, number])[]
          | (new () => any)
          | FunctionalComponent
        loading: boolean
        transition:
          | string
          | boolean
          | (TransitionProps & { component: Component })
        vertical: boolean
        closeOnBack: boolean
        contained: boolean
        contentClass: any
        contentProps: any
        opacity: string | number
        zIndex: string | number
        target:
          | Element
          | (string & {})
          | 'parent'
          | 'cursor'
          | ComponentPublicInstance
          | [number, number]
        closeOnContentClick: boolean
        eager: boolean
        locationStrategy: 'static' | 'connected' | LocationStrategyFunction
        origin: Anchor | 'auto' | 'overlap'
        attach: string | boolean | Element
        prependAvatar: string
        queueGap: number
        queueIndex: number
        reverseTimer: boolean
        timer: boolean | 'top' | 'bottom'
        timerColor: string
        timeout: string | number
      } & { style: any }
      error: (
        val: Error,
      ) => {
        title: string
        text: string
        class: any
        height: string | number
        maxHeight: string | number
        maxWidth: string | number
        minHeight: string | number
        minWidth: string | number
        width: string | number
        location: Anchor
        position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'
        absolute: boolean
        rounded: string | number | boolean
        tile: boolean
        theme: string
        color: string
        variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
        disabled: boolean
        prependIcon:
          | string
          | (string | [string, number])[]
          | (new () => any)
          | FunctionalComponent
        loading: boolean
        transition:
          | string
          | boolean
          | (TransitionProps & { component: Component })
        vertical: boolean
        closeOnBack: boolean
        contained: boolean
        contentClass: any
        contentProps: any
        opacity: string | number
        zIndex: string | number
        target:
          | Element
          | (string & {})
          | 'parent'
          | 'cursor'
          | ComponentPublicInstance
          | [number, number]
        closeOnContentClick: boolean
        eager: boolean
        locationStrategy: 'static' | 'connected' | LocationStrategyFunction
        origin: Anchor | 'auto' | 'overlap'
        attach: string | boolean | Element
        prependAvatar: string
        queueGap: number
        queueIndex: number
        reverseTimer: boolean
        timer: boolean | 'top' | 'bottom'
        timerColor: string
        timeout: string | number
      } & { style: any }
      onDismiss: (reason: 'overflow' | 'auto' | 'dismissed' | 'cleared') => void
    })
)[]

[]

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
string

undefined

Displays an avatar in the prepend area using the provided image source.

prepend-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Displays an icon in the prepend area.

reverse-timer
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
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
boolean | 'top' | 'bottom'

false

Display a progress bar that counts down until the snackbar closes. Use bottom to change the default placement.

timer-color
string

undefined

Sets the color of the timer progress bar.

title
string

undefined

Specify a title text for the component.

total-visible
New in v4.0.0
string | number

1

Specify the total visible snackbars.

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
[
  (
    | string
    | ({
        title: string
        text: string
        class: any
        height: string | number
        maxHeight: string | number
        maxWidth: string | number
        minHeight: string | number
        minWidth: string | number
        width: string | number
        location: Anchor
        position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'
        absolute: boolean
        rounded: string | number | boolean
        tile: boolean
        theme: string
        color: string
        variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
        disabled: boolean
        prependIcon:
          | string
          | (string | [string, number])[]
          | (new () => any)
          | FunctionalComponent
        loading: boolean
        transition:
          | string
          | boolean
          | (TransitionProps & { component: Component })
        vertical: boolean
        closeOnBack: boolean
        contained: boolean
        contentClass: any
        contentProps: any
        opacity: string | number
        zIndex: string | number
        target:
          | Element
          | (string & {})
          | 'parent'
          | 'cursor'
          | ComponentPublicInstance
          | [number, number]
        closeOnContentClick: boolean
        eager: boolean
        locationStrategy: 'static' | 'connected' | LocationStrategyFunction
        origin: Anchor | 'auto' | 'overlap'
        attach: string | boolean | Element
        prependAvatar: string
        queueGap: number
        queueIndex: number
        reverseTimer: boolean
        timer: boolean | 'top' | 'bottom'
        timerColor: string
        timeout: string | number
      } & { style: any } & {
        collapsed: { width: number; height: number }
        promise: Promise<unknown>
        success: (
          val: unknown,
        ) => {
          title: string
          text: string
          class: any
          height: string | number
          maxHeight: string | number
          maxWidth: string | number
          minHeight: string | number
          minWidth: string | number
          width: string | number
          location: Anchor
          position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'
          absolute: boolean
          rounded: string | number | boolean
          tile: boolean
          theme: string
          color: string
          variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
          disabled: boolean
          prependIcon:
            | string
            | (string | [string, number])[]
            | (new () => any)
            | FunctionalComponent
          loading: boolean
          transition:
            | string
            | boolean
            | (TransitionProps & { component: Component })
          vertical: boolean
          closeOnBack: boolean
          contained: boolean
          contentClass: any
          contentProps: any
          opacity: string | number
          zIndex: string | number
          target:
            | Element
            | (string & {})
            | 'parent'
            | 'cursor'
            | ComponentPublicInstance
            | [number, number]
          closeOnContentClick: boolean
          eager: boolean
          locationStrategy: 'static' | 'connected' | LocationStrategyFunction
          origin: Anchor | 'auto' | 'overlap'
          attach: string | boolean | Element
          prependAvatar: string
          queueGap: number
          queueIndex: number
          reverseTimer: boolean
          timer: boolean | 'top' | 'bottom'
          timerColor: string
          timeout: string | number
        } & { style: any }
        error: (
          val: Error,
        ) => {
          title: string
          text: string
          class: any
          height: string | number
          maxHeight: string | number
          maxWidth: string | number
          minHeight: string | number
          minWidth: string | number
          width: string | number
          location: Anchor
          position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'
          absolute: boolean
          rounded: string | number | boolean
          tile: boolean
          theme: string
          color: string
          variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
          disabled: boolean
          prependIcon:
            | string
            | (string | [string, number])[]
            | (new () => any)
            | FunctionalComponent
          loading: boolean
          transition:
            | string
            | boolean
            | (TransitionProps & { component: Component })
          vertical: boolean
          closeOnBack: boolean
          contained: boolean
          contentClass: any
          contentProps: any
          opacity: string | number
          zIndex: string | number
          target:
            | Element
            | (string & {})
            | 'parent'
            | 'cursor'
            | ComponentPublicInstance
            | [number, number]
          closeOnContentClick: boolean
          eager: boolean
          locationStrategy: 'static' | 'connected' | LocationStrategyFunction
          origin: Anchor | 'auto' | 'overlap'
          attach: string | boolean | Element
          prependAvatar: string
          queueGap: number
          queueIndex: number
          reverseTimer: boolean
          timer: boolean | 'top' | 'bottom'
          timerColor: string
          timeout: string | number
        } & { style: any }
        onDismiss: (
          reason: 'overflow' | 'auto' | 'dismissed' | 'cleared',
        ) => void
      })
  )[],
]

Event that is emitted when the component’s model changes.

Slots
{ item: | string | ({ title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } & { collapsed: { width: number; height: number } promise: Promise<unknown> success: ( val: unknown, ) => { title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } error: ( val: Error, ) => { title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } onDismiss: ( reason: 'overflow' | 'auto' | 'dismissed' | 'cleared', ) => void }) props: { onClick: () => void } }
{ item: | string | ({ title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } & { collapsed: { width: number; height: number } promise: Promise<unknown> success: ( val: unknown, ) => { title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } error: ( val: Error, ) => { title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } onDismiss: ( reason: 'overflow' | 'auto' | 'dismissed' | 'cleared', ) => void }) }
{ item: | string | ({ title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } & { collapsed: { width: number; height: number } promise: Promise<unknown> success: ( val: unknown, ) => { title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } error: ( val: Error, ) => { title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } onDismiss: ( reason: 'overflow' | 'auto' | 'dismissed' | 'cleared', ) => void }) }
{ item: | string | ({ title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } & { collapsed: { width: number; height: number } promise: Promise<unknown> success: ( val: unknown, ) => { title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } error: ( val: Error, ) => { title: string text: string class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number location: Anchor position: 'fixed' | 'static' | 'relative' | 'absolute' | 'sticky' absolute: boolean rounded: string | number | boolean tile: boolean theme: string color: string variant: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain' disabled: boolean prependIcon: | string | (string | [string, number])[] | (new () => any) | FunctionalComponent loading: boolean transition: | string | boolean | (TransitionProps & { component: Component }) vertical: boolean closeOnBack: boolean contained: boolean contentClass: any contentProps: any opacity: string | number zIndex: string | number target: | Element | (string & {}) | 'parent' | 'cursor' | ComponentPublicInstance | [number, number] closeOnContentClick: boolean eager: boolean locationStrategy: 'static' | 'connected' | LocationStrategyFunction origin: Anchor | 'auto' | 'overlap' attach: string | boolean | Element prependAvatar: string queueGap: number queueIndex: number reverseTimer: boolean timer: boolean | 'top' | 'bottom' timerColor: string timeout: string | number } & { style: any } onDismiss: ( reason: 'overflow' | 'auto' | 'dismissed' | 'cleared', ) => void }) }
actions

Used to bind styles to v-btn to match MD2 specification.

header

Slot for custom content above the snackbar body.

item

Define a custom item appearance.

text

Slot for the component’s text content.

Exposed
() => void
clear

Dismisses all visible snackbars and clears the queue.