Documentation
Documentation Hub

BaseSnack

Muted snacks

Muted snacks are used to display an interactive message to the user. They feature a close button that can trigger an action when clicked.

React
Angular
Vue
Html
Python
Show code

Light snacks

Snacks can be displayed in a light version. Use the light prop to display a light snack.

React
Angular
Vue
Html
Python
Show code

Small snacks

Snacks can have a smaller size. Use the small prop to display a small snack.

React
Angular
Vue
Html
Python
Show code

Icon snacks

Snacks can have icons. Use the icon prop to display an icon.

React
Angular
Vue
Html
Python
Show code

Light icons

Snacks can be displayed in a light version. Use the light prop to display a light snack.

React
Angular
Vue
Html
Python
Show code

Small icons

Snacks can have a smaller size. Use the small prop to display a small snack.

React
Angular
Vue
Html
Python
Show code

Image snacks

Snacks can have images. Use the image prop to display an image.

Lana
Harry
Mike
Maya
John
Show code

Light images

Snacks can be displayed in a light version. Use the light prop to display a light snack.

Lana
Harry
Mike
Maya
John
Show code

Small images

Snacks can have a smaller size. Use the small prop to display a small snack.

Lana
Harry
Mike
Maya
John
Show code

#<BaseSnack>

Properties

size
The size of the snack.
Show example
color
The color of snack, might be 'default' or 'muted'.
Show example
icon
An optional icon to display in the snackbar.
Show example
label
The text to display in the snackbar.
Show example
image
An optional image to display in the snackbar.
Show example

Events

@delete
Show example

Slots

#default
Show example