Documentation
Documentation Hub

Size

Snacks are used to display an interactive message to the user. They feature a close button that can trigger an action when clicked. Snacks can have different sizes. Use the size prop to change the size of the snack.

React
Angular
Vue
Show code
vue

Color:default

Snacks default to the light version. Use the color prop with the default value to display a light snack.

React
Angular
Vue
Html
Python
Show code
vue

Color:muted

Snacks have a muted version. Use the color prop with the muted value to display a muted snack.

React
Angular
Vue
Html
Python
Show code
vue

Icon:default

Snacks can have an icon displayed on the left. Use the icon prop to display an icon.

React
Angular
Vue
Show code
vue

Icon:muted

Snacks can have an icon displayed on the left. Use the icon prop to display an icon.

React
Angular
Vue
Show code
vue

Image:default

Snacks can have an icon displayed on the left. Use the image prop to display an image.

Mike
Maya
John
Show code
vue

Image:muted

Snacks can have an icon displayed on the left. Use the image prop to display an image.

Mike
Maya
John
Show code
vue

#<BaseSnack>

•Properties

classes
Optional CSS classes to apply to the component inner elements.
Show example
vue
icon
An optional icon to display in the snackbar.
Show example
vue
image
An optional image to display in the snackbar.
Show example
vue
label
The text to display in the snackbar.
Show example
vue

•Properties (with app.config)

color
The color of snack.
Show example
vue
size
The size of the snack.
Show example
vue

•Events

@delete
This events receive no value
Show example
vue

•Slots

#icon
This slot has no inherted props
Show example
vue
#default
This slot has no inherted props
Show example
vue

•Exposed

color
The color of snack.
Show example
vue
size
The size of the snack.
Show example
vue