Snackbar

ARIA

RTL

The snackbar component is a non-disruptive message that appears on the interface to provide quick, at-a-glance feedback on the outcome of an action.

Based on Radix.

Anatomy

<Snackbar>
  <Snackbar.Icon>...</Snackbar.Icon>
  <Snackbar.Content>
    <Snackbar.Header>...</Snackbar.Header>
    <Snackbar.Message>...</Snackbar.Message>
  </Snackbar.Content>
  <Snackbar.Close />
</Snackbar>

Default

Positions

Options

Semantic types

Auto close

Customization

Snackbar Queue

Snackbar props

Name	Type	Required	Default	Description
autoClose	number	No	5000	Duration the snackbar takes in ms.
children	React.ReactNode	No	-	Children content
className	string	No	-	Tailwind classes for customization
isOpen	boolean	Yes	false	Toggles visibility of Snackbar
position	top-left \| top-center \| top-right \| bottom-left \| bottom-center \| bottom-right	No	top-right	Position of snackbar
onOpenChange	() => void	Yes	-	Event handler called when the open state of the dialog changes

Snackbar.Content props

Name	Type	Required	Default	Description
children	React.ReactNode	No	-	Children content
className	string	No	-	Tailwind classes for customization

Snackbar.Header props

Name	Type	Required	Default	Description
children	React.ReactNode	No	-	Children content
className	string	No	-	Tailwind classes for customization

Snackbar.Message props

Name	Type	Required	Default	Description
children	React.ReactNode	No	-	Children content
className	string	No	-	Tailwind classes for customization

Snackbar.Icon props

Name	Type	Required	Default	Description
children	React.ReactNode	No	-	Children content
className	string	No	-	Tailwind classes for customization

Snackbar.Close props

Name	Type	Required	Default	Description
ariaLabel	string	No	Close	Aria-label for close button
className	string	No	-	Tailwind classes for customization