Component

Snackbar

A floating status toast you trigger imperatively. Call Snackbar.show() from anywhere — it slides in, takes a status icon and an action, and swipes away to dismiss.

Item added to cart

jsx

import { CheckCircle2 } from 'lucide-react';
import { Snackbar } from '../components/ui';

// Mount once near the root of your app:
<Snackbar.Host />

// Then call it from anywhere:
Snackbar.show({
  message: 'Item added to cart',
  icon: <CheckCircle2 size={18} />,
  actionLabel: 'Undo',
  onAction: () => restoreItem(),
});

show(options)

Prop	Type	Default	Description
`message`	string	—	The status text.
`position`	'top' \	'bottom'	`'bottom'`
`status`	'loading' \	'success'
`icon`	ReactNode	—	Custom leading icon, used when no `status` is set.
`actionLabel`	string	—	Optional trailing action button label.
`onAction`	() => void	—	Called when the action is tapped.

Methods

Prop	Type	Default	Description
`Snackbar.show`	(options) => Promise	—	Show the toast; resolves when it dismisses.
`Snackbar.dismiss`	() => void	—	Dismiss the current toast.
`Snackbar.Host`	Component	—	Mount once near the app root to enable Snackbar.