Snackbar

Overview

A snackbar briefly informs the user about a process the app has performed or will perform. It appears temporarily near the bottom of the screen, above other content. Trigger one imperatively with snackbar(), which renders through the Sonner <Toaster /> already mounted in your app.

Examples

With action

A snackbar may offer a single action (for example, "Undo"). Snackbars with an action stay on screen longer, until the user acts on or dismisses them.

Configurations

The Snackbar primitive covers the five Figma layouts: text only (one or two lines), text with a close affordance, text with an inline action, and a longer action stacked onto its own row.

Installation

npx morpha-ui add snackbar

Usage

Call snackbar() from an event handler:

import { snackbar } from '@/components/ui/snackbar';

snackbar('Conversation archived.', {
  action: { label: 'Undo', onClick: () => restore() },
  closable: true,
});

For a static, fully-controlled bar, compose the primitive directly:

import {
  Snackbar,
  SnackbarText,
  SnackbarAction,
  SnackbarClose,
} from '@/components/ui/snackbar';

<Snackbar>
  <SnackbarText>Supporting text</SnackbarText>
  <SnackbarAction>Action</SnackbarAction>
  <SnackbarClose />
</Snackbar>;

API Reference

snackbar(message, options)

The imperative helper returns the toast id (pass it to toast.dismiss). options extends Sonner's ExternalToast (so position, duration, id, etc. pass through) with the fields below.

Snackbar

The root takes a layout prop (inline | stacked) and forwards <div> attributes. Compose it with SnackbarText, SnackbarAction, SnackbarClose, and — for stacked — SnackbarContent and SnackbarActions.

SnackbarAction

Accessibility

• Toasts are announced through Sonner's aria-live region; keep the message short and self-contained.
• SnackbarClose requires an aria-label (defaults to "Dismiss").
• Don't make a snackbar the only way to reach a critical action — it is transient and easy to miss.
• When a snackbar carries an action, keep it on screen until the user acts on or dismisses it, rather than auto-dismissing.
• Position snackbars so they don't obscure interactive elements or the focused control.