Snackbar

Snackbars provide brief feedback about an action or system event and may optionally include actions for user response.

Quick Start

Use a Snackbar to communicate temporary feedback to users.

Changes saved successfully.

1import { Snackbar } from "@ecos/ui";
2
3<Snackbar
4  message="Changes saved successfully."
5/>

Display a simple message without any actions.

Lorem ipsum dolor sit amet

1<Snackbar
2  message="Lorem ipsum dolor sit amet"
3/>

Provide an action when users may need to respond to the message.

Lorem ipsum dolor sit amet

1<Snackbar
2  message="Lorem ipsum dolor sit amet"
3  actionLabel="Undo"
4  onAction={() => {}}
5/>

Allow users to dismiss the snackbar.

Lorem ipsum dolor sit amet

1<Snackbar
2  message="Lorem ipsum dolor sit amet"
3  onClose={() => {}}
4/>

Combine actions and dismissal controls for maximum flexibility.

Lorem ipsum dolor sit amet

1<Snackbar
2  message="Lorem ipsum dolor sit amet"
3  actionLabel="Undo"
4  onAction={() => {}}
5  onClose={() => {}}
6/>

Apply custom classes to control the snackbar layout.

Application updated successfully.

1<Snackbar
2  className="w-72"
3  message="Application updated successfully."
4/>

Property	Type	Default	Description
message	string	-	The primary message displayed within the snackbar.
state	"default" \| "success" \| "error"	"default"	Determines the visual styling of the snackbar.
actionLabel	string	-	Label displayed for the snackbar action button.
onAction	() => void	-	Called when the action button is clicked.
onClose	() => void	-	Called when the dismiss button is clicked.
className	string	-	Additional classes applied to the snackbar container.