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.

Anatomy

<Snackbar>
  <Snackbar.Trigger>...</Snackbar.Trigger>
  <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 props

Name	Type	Required	Default	Description
trigger	slot	Yes	-	Clickable trigger element, see Snackbar.Trigger
content	slot	No	-	Content of Snackbar item, see Snackbar.Content
icon	slot	No	-	Icon slot of Snackbar item, see Snackbar.Icon
close	slot	No	-	Close button slot of Snackbar item, see Snackbar.Close
position	top-left \| top-center \| top-right \| bottom-left \| bottom-center \| bottom-right	No	top-right	Close button slot of Snackbar item, see Snackbar.Close
class	css_class	No	-	Tailwind classes for custom styles
is_open	boolean	No	false	Whether or not the snackbar is open

Snackbar.Content props

Name	Type	Required	Default	Description
header	slot	No	-	Header slot of Snackbar item, see Snackbar.Header
message	slot	No	-	Message slot of Snackbar item, see Snackbar.Message
class	css_class	No	-	Tailwind classes for custom styles

Snackbar.Header props

Name	Type	Required	Default	Description
default	slot	No	-	Header of Snackbar item
class	css_class	No	-	Tailwind classes for custom styles

Snackbar.Message props

Name	Type	Required	Default	Description
default	slot	No	-	Message of Snackbar item
class	css_class	No	-	Tailwind classes for custom styles

Snackbar.Icon props

Name	Type	Required	Default	Description
default	slot	No	-	Icon slot of Snackbar item
class	css_class	No	-	Tailwind classes for custom styles