Snackbar

Brief, dismissable feedback that never steals the user's place.

import { SnackbarProvider, useSnackbar } from "@brijbyte/md3-react/snackbar";

@import "@brijbyte/md3-react/snackbar.css";

Confirm that something happened — a save, a delete, a sync — without blocking the user or asking for acknowledgment. Snackbars surface brief, low-emphasis messages at the bottom of the screen, and only one shows at a time: a new message replaces whatever's displayed rather than piling up. Mount a single SnackbarProvider near the root of your app, then call useSnackbar() from any component underneath it to trigger one:

const { showSnackbar } = useSnackbar();

showSnackbar({
  message: "Conversation archived",
  action: { label: "Undo", onClick: undoArchive },
});

Need to pull a message early — say the state it describes just went stale? showSnackbar returns the toast's id, which closeSnackbar accepts to dismiss it before its timer runs out. For a plain message with no action, showSnackbar("Conversation archived") is shorthand for the object form.

Message only

Start here for a plain confirmation that clears itself out: a message with no action, auto-dismissing after a short delay. Add closable for a dismiss icon, or action for a text button — hovering or focusing the snackbar pauses the auto-dismiss timer so a user mid-read or mid-decision never loses it early. Clicking action always dismisses the snackbar in addition to running its onClick, matching the close icon's behavior, so callers don't have to remember to close it themselves. Like every other icon-taking component in this library, the close icon isn't bundled — pass one via SnackbarProvider's closeIcon prop (@brijbyte/md3-icons/outlined/Close here).

Two-line

Don't worry about message length: longer text wraps up to two lines before truncating, while the action stays inline and vertically centered against it.

Undo pattern

Give users a way back from destructive changes without a confirmation dialog in the way: confirm the change happened, and offer a brief window to reverse it.

Quarterly report
Team offsite photos
Design review notes

Accessibility

You don't have to wire up screen-reader or keyboard support yourself — it's built in. Snackbars announce politely (aria-live="polite", Base UI Toast's default low priority) rather than interrupting whatever the user is already doing, per the MD3 spec's rule that people should be alerted without being disrupted — never make a snackbar role="alert" or otherwise assertive. An actionable snackbar still needs to be reachable from the keyboard without stealing focus on arrival: pressing

F6 jumps focus into the toast viewport landmark, from which Tab reaches the action and close buttons like any other control. Set duration to give people enough time to read the message and react — avoid a delay so short the action becomes impractical to use, and reach for closable instead of a long timeout when a message needs to stay put until the user dismisses it explicitly.