Snackbar
Brief notification that appears at a fixed screen position. Auto-dismisses after a timeout. Five severity variants and six position options.
import
{ Snackbar } from "@pepulux/ui"Default — with Undo action
Neutral dark snackbar with an inline action button. Auto-hides after 3 s.
Severity variants
Five color schemes: default (dark), success (green), warning (amber), error (red), info (blue).
Position — 6 locations
Snackbars can appear in any corner or centered at top/bottom.
Without auto-hide
Set autoHideDuration={0} to prevent automatic dismissal. User must click × to close.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open* | boolean | — | Controls visibility |
| message* | string | — | Notification message text |
| severity | "default" | "success" | "warning" | "error" | "info" | "default" | Color and semantic intent |
| position | "bottom-left" | "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right" | "bottom-left" | Fixed screen position |
| action | { label: string; onClick: () => void } | — | Inline action button shown alongside the message |
| onClose | () => void | — | Called on auto-hide or manual × close |
| autoHideDuration | number | 4000 | ms before auto-dismissal. Set to 0 to disable. |
| className | string | — | Additional CSS classes on the snackbar container |