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.
Show codeHide code
Snacks default to the light version. Use the color prop with the default value to display a light snack.
Show codeHide code
Snacks have a muted version. Use the color prop with the muted value to display a muted snack.
Show codeHide code
Snacks can have an icon displayed on the left. Use the icon prop to display an icon.
Show codeHide code
Snacks can have an icon displayed on the left. Use the icon prop to display an icon.
Show codeHide code
Snacks can have an icon displayed on the left. Use the image prop to display an image.
Show codeHide code
Snacks can have an icon displayed on the left. Use the image prop to display an image.
Show codeHide code
size@default
'md'
Show exampleHide example
color@default
'muted'
Show exampleHide example
labelShow exampleHide example
iconShow exampleHide example
image