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
classes
Show exampleHide example
icon
Show exampleHide example
image
Show exampleHide example
label
Show exampleHide example
color
Show exampleHide example
size
Show exampleHide example
color
Show exampleHide example
size