Snackbar

Snackbars show a brief, low-emphasis message about an app process at the bottom of the screen. Unlike a typical toast library, Snackbar is not an imperative toast() function — it's a component you mount once (usually near the root of a page) with a bind:message prop, then trigger by assigning a string to that bound variable from anywhere in your app.

M3 Spec

open_in_new

Overview

Snackbar implements the Material Design 3 Snackbar pattern. It watches its bindable message prop: when it becomes a non-empty string (or a Snippet), the snackbar slides in from the bottom; after 4 seconds it auto-dismisses and clears message back to an empty string (unless static is set, in which case it waits for the user to click the close button).

There is no dedicated show/open prop or store-based queue — mount one Snackbar per region of your UI and drive it entirely through the message you bind to it.

Import

import { Snackbar } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Toggle label, showClose, and static via Controls; also see the "Triggered" story for the click-to-show pattern.

Basic Usage

Mount Snackbar once, keep a piece of state for its message, and assign to that state to trigger it:

<script lang="ts">
  import { Snackbar } from '@noxlovette/material';

  let snackbarMessage = $state('');
</script>

<button onclick={() => (snackbarMessage = 'Changes saved.')}>
  Save
</button>

<Snackbar bind:message={snackbarMessage} label="Undo" callback={undoSave} />

Snackbar Props

Prop	Type	Default	Description
`message`	`string \| Snippet`	`''`	Bindable. Assign a string (or Snippet) to show the snackbar; assigning an empty string hides it. This is the trigger — there is no separate open/show prop.
`label`	`string`	`—`	Label for an optional action button (e.g. "Undo"), rendered next to the close button.
`callback`	`() => void`	`—`	Click handler for the action button.
`showClose`	`boolean`	`true`	Whether to render a dismiss (X) icon button.
`static`	`boolean`	`false`	When true, the snackbar stays until manually dismissed instead of auto-hiding after 4 seconds.
`fixed`	`boolean`	`true`	When true, positions the snackbar fixed to the bottom-center of the viewport. Set false to let it flow inline within its container instead.

Accessibility

timer

Auto-dismiss timing

Non-static snackbars dismiss after 4 seconds — avoid the sole source of critical information here since it disappears on its own.

touch_app

Dismiss control

showClose renders an explicit close button with aria-label="Dismiss snackbar", so users are never forced to wait out the timer.

priority_high

One at a time

Only mount one Snackbar per region and drive it through a single message binding — stacking multiple instances is not a supported pattern.