Snackbar

Brief messages about app processes displayed at the bottom of the screen.

Import

tsx

import { Snackbar } from '@tac-ui/web';

Playground

Interactively configure the Snackbar props below.

This is a snackbar message.

Variant

Message

tsx

<Snackbar
  open={open}
  variant="default"
  onClose={() => setOpen(false)}
  autoHideDuration={3000}
>
  This is a snackbar message.
</Snackbar>

Variants

Five semantic variants communicate the nature of the notification: default, success, error, warning, and info. Non-default variants show a colored dot indicator.

This is a default snackbar message.

Item has been saved successfully.

Failed to delete item. Please try again.

Storage is almost full.

New version available. Refresh to update.

tsx

<Snackbar open={open} variant="default" onClose={handleClose}>
  Message text
</Snackbar>

// Available variants: default, success, error, warning, info

Interactive

Trigger each variant to see the animated entrance and auto-dismiss behavior after 3 seconds.

tsx

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Show Snackbar</Button>
<Snackbar
  open={open}
  variant="success"
  onClose={() => setOpen(false)}
  autoHideDuration={3000}
>
  Item has been saved successfully.
</Snackbar>

With Action

Pass an action label and onAction callback to render an inline action button alongside the message.

tsx

<Snackbar
  open={open}
  onClose={() => setOpen(false)}
  action="Undo"
  onAction={() => handleUndo()}
>
  Item moved to trash.
</Snackbar>

API Reference

Prop	Type	Default	Description
open	boolean	false	Controls whether the snackbar is visible.
variant	"default" \| "success" \| "error" \| "warning" \| "info"	"default"	Visual style variant of the snackbar.
onClose	() => void	-	Callback fired when the snackbar requests to be closed.
autoHideDuration	number	5000	Duration in milliseconds before auto-hide. Set to 0 to disable.
icon	React.ReactNode	-	Optional icon shown on the left (only visible in the default variant).
action	React.ReactNode	-	Action button label rendered to the right of the message.
onAction	() => void	-	Callback fired when the action button is clicked.
closeLabel	string	"Close"	Accessible label for the close button.