Snackbar
A single bottom-anchored message with one optional action, such as undo. Queued imperatively with snackbar(...), it shows one at a time on a neutral surface above the tab bar — distinct from the status-coloured, stacking Toast.
// Wrap the app once, inside MobileShell.<SnackbarProvider>{children}</SnackbarProvider>
// Then raise one from anywhere:snackbar('Message sent');snackbar('Item deleted', { actionLabel: 'Undo', onAction: restore });const id = snackbar('Uploading…', { duration: 0 });snackbar.dismiss(id);Live
Delete a row in the list to raise a snackbar with an undo action — restoring the row and dismissing the message.
Snackbar vs Toast
Use a Snackbar for a single confirmation with one optional action, at the bottom edge. Use a Toast for status notices (info, success, warning, error) that stack in the corner. They share the timing and live-region handling but never share a queue.
Options
| Prop | Type | Default | Notes |
|---|---|---|---|
actionLabel | string | — | Label for the single action, e.g. "Undo". Needs onAction. |
onAction | () => void | — | Runs on the action, then the snackbar closes. |
duration | number | provider's | ms before auto-dismiss; 0 keeps it until dismissed. |
id | string | — | Stable id; re-emitting updates in place. |
onDismiss | () => void | — | Runs after it leaves the screen. |