Snackbar
A brief message at the bottom of the screen about something the app did, with an optional action like Undo.With Undo
Preview
Code
Archived: 0
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Snackbar } from '@advui/core'
<Snackbar
open={open}
onOpenChange={setOpen}
action={{ label: 'Undo', onPress: undo }}
>
Conversation archived
</Snackbar>Examples
Stays until dismissed
For states that last, like being offline.Preview
Code
API reference
Snackbar
| Prop | Type | Default | Description |
|---|---|---|---|
open required | boolean | — | Whether it is shown. |
onOpenChange required | (open: boolean) => void | — | Called when it closes by itself, from the action or the close button. |
children required | ReactNode | — | The message. |
action | { label: string; onPress: () => void } | — | One action, such as Undo. Pressing it also closes the snackbar. |
duration | number | null | 4000, or 8000 with an action | Milliseconds before it closes by itself; `null` keeps it open. |
showClose | boolean | duration === null | Show a close (×) button. |
Accessibility
- The message sits in a polite live region (
role="status") that stays mounted, so screen readers announce it without moving focus. On iOS it is announced withAccessibilityInfo. - The timer pauses while the pointer or keyboard focus is on the snackbar, and it runs longer when there is an action, so people have time to reach it.
- Actions are optional shortcuts: never put the only way to do something in a snackbar. Use
duration={null}for messages that must stay. - Colors use the inverse surface with
inversePrimaryfor the action, checked for WCAG AA contrast.
| Key | Action |
|---|---|
| Tab | Reaches the action and the close button (it does not take focus). |
| Enter / Space | Runs the focused action. |
Responsive behavior
Full width minus 16px margins on phones; centered and at most 576px wide on larger screens.
Platform notes
Web
Rendered in a portal above the page, like toasts.
iOS
Rendered in a native portal; keep it above the home indicator by giving the app safe-area insets.
Android
Announced through a polite live region. With
androidRipple (on in material()), presses show the native ripple.