DocsComponents

Snackbar

Brief feedback about an action, with an optional next step.

Unsaved

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/snackbar.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

The parent controls active. Handle onTimeout to close after the requested duration and onClick for the action button.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

Snackbar visibility is controlled by active. onTimeout asks your application to dismiss it after timeout milliseconds; update active in that handler. A timeout of 0 disables automatic timeout reporting.

Handle the action through onClick. delay keeps the snackbar mounted for its exit transition and is separate from timeout.

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`Snackbar`

Property	Type	Default
`action`	`string`	`—`
`active`	`boolean`	`false`
`delay`	`number`	`500`
`label`	`ReactNode`	`—`
`timeout`	`number`	`0`
`type`	`'accept' \| 'cancel' \| 'warning'`	`—`
`classNames`	`SnackbarTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`SnackbarTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`ref`	`Ref<HTMLDivElement>`	`—`

Callbacks

Property	Type	Default
`onClick`	`MouseEventHandler<HTMLElement>`	`—`
`onTimeout`	`() => void`	`—`

Also inherits Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

accept
active
button
cancel
label
snackbar
warning

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/snackbar.

SnackbarTheme

tsx

type SnackbarTheme = Partial<
  Record<'accept' | 'active' | 'button' | 'cancel' | 'label' | 'snackbar' | 'warning', string>
>;

SnackbarClassNames

tsx

type SnackbarClassNames = SnackbarTheme;

SnackbarProps

tsx

interface SnackbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
  action?: string;
  active?: boolean;
  delay?: number;
  label?: ReactNode;
  onClick?: MouseEventHandler<HTMLElement>;
  onTimeout?: () => void;
  timeout?: number;
  type?: 'accept' | 'cancel' | 'warning';
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: SnackbarTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: SnackbarTheme;
  ref?: Ref<HTMLDivElement>;
}

Material guidelines

Show brief, non-blocking feedback at the bottom of the screen, one snackbar at a time. Let it disappear after an appropriate interval.
Offer zero or one useful action, such as Undo. Do not add Dismiss or Cancel actions, icons, or a second action; Undo must actually reverse the change.
Keep essential actions available elsewhere after the message expires.

Material Design 1: Snackbars and toasts