Default snacks

Default 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
This component has no props