toc

Snackbar

Snackbars tell people about a process an app has performed or will perform, without interrupting them.

HTML

<md-gb-button id="archive">Archive</md-gb-button>
<md-gb-snackbar id="archived" fixed label-text="Email archived" action-label="Undo"></md-gb-snackbar>

document.querySelector('#archive')!.addEventListener('click', () => {
  document.querySelector('md-gb-snackbar')!.show();
});

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-snackbar.json (setup)

Usage guidelines

Link to “Usage guidelines”

Low priority only. Use a snackbar for a message that needs no response. For an important one that blocks the task, use a dialog.
One at a time. Show a single snackbar, and queue consecutive messages.
At most one action. Give it a short action such as Undo. A snackbar with an action stays until it is used or dismissed.
Repeat the message nearby. A snackbar that disappears on its own is easy to miss, so also show the result inline, such as changing "Save" to "Saved".

Anatomy

Link to “Anatomy”

A snackbar has a message, an optional action and an optional close button.

Photo deleted Undo

<md-gb-snackbar open timeout-ms="-1">
  Photo deleted
  <md-gb-button slot="action">Undo</md-gb-button>
  <md-gb-icon-button slot="dismiss" aria-label="Close">
    <md-gb-icon>close</md-gb-icon>
  </md-gb-icon-button>
</md-gb-snackbar>

Examples

Link to “Examples”

Close button

Link to “Close button”

Add has-close-button so people can dismiss the snackbar. Without an action it stays for timeout-ms (5 seconds by default); use -1 to keep it open.

HTML

<md-gb-button id="save">Save</md-gb-button>
<md-gb-snackbar id="saved" fixed has-close-button timeout-ms="-1" label-text="Changes saved"></md-gb-snackbar>

document.querySelector('#save')!.addEventListener('click', () => {
  document.querySelector('md-gb-snackbar')!.show();
});

Two lines

Link to “Two lines”

Put longer text in the default slot for a two-line snackbar.

HTML

<md-gb-button id="send">Send</md-gb-button>
<md-gb-snackbar id="sent" fixed action-label="View">
  Message sent to 3 people.<br>Replies appear in your inbox.
</md-gb-snackbar>

document.querySelector('#send')!.addEventListener('click', () => {
  document.querySelector('md-gb-snackbar')!.show();
});

Consecutive snackbars

Link to “Consecutive snackbars”

md-gb-snackbar-host shows messages one after another. Call showSnackbar(); it resolves with action-performed or dismissed. Pass replace: true to swap out a message that is out of date.

HTML

<md-gb-button id="queue">Queue messages</md-gb-button>
<output id="result" role="status"></output>
<md-gb-snackbar-host id="host" fixed></md-gb-snackbar-host>

const host = document.querySelector('md-gb-snackbar-host')!;
const result = document.querySelector('#result')!;
document.querySelector('#queue')!.addEventListener('click', async () => {
  host.showSnackbar('Photo uploaded');
  const outcome = await host.showSnackbar({message: 'Photo deleted', actionLabel: 'Undo'});
  result.textContent = outcome === 'action-performed' ? 'Restored' : 'Deleted';
});

Anchor

Link to “Anchor”

Set anchor to the id of an element, such as a FAB, so the snackbar appears above it.

HTML

<md-gb-fab id="compose" aria-label="Compose">
  <md-gb-icon>edit</md-gb-icon>
</md-gb-fab>
<md-gb-snackbar id="drafted" fixed anchor="compose" label-text="Draft saved"></md-gb-snackbar>

document.querySelector('#compose')!.addEventListener('click', () => {
  document.querySelector('md-gb-snackbar')!.show();
});

Accessibility

Link to “Accessibility”

The message is announced politely in a live region, so focus stays where it is.
Auto-dismissing snackbars are hard to read for people with low vision or who need more time. Give the same information inline, or add an action so the snackbar stays until it is used.
Give a snackbar that has a close button a localized close-label.
Escape closes the snackbar, and a slotted action is a normal button in the tab order.

Compatibility

Link to “Compatibility”

Material Design 3Spec checked38% tokens

71 of 169 buildable spec units are tested, 1 are excluded with a written reason and 0 are uncovered (the target is 0). 16 of 42 token declarations match the spec (38%), and 26 have no spec token.

snackbar on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

@starting-style (opens in a new tab) Newly available degrades safely where it is missing
Cursor styles (opens in a new tab) Limited availability degrades safely where it is missing

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 passButton

Roles the component renders: button (opens in a new tab).

Follows the WAI-ARIA Authoring Practices: Button (opens in a new tab).

1 rendered state run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse97 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Eliminate render-blocking resources
Minify JavaScript
Reduce unused CSS
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-snackbar>

Link to “<md-gb-snackbar>”

A Material Design snackbar component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`actionLabel` Visible text of the built-in action button. Rendered only when non-empty and nothing is slotted into `action`.	`action-label`	`string`	`''`
`align` Where a snackbar sits on wide layouts: `center` (default) or `start` (left-aligned). Use the same value wherever snackbars appear, so they always show in the same spot. Compact layouts span the width.	`align`	`"start"`	"center"
`anchor` The id of an element the snackbar appears above, such as a FAB or a docked toolbar, in the snackbar's root (document or shadow root). See `anchorElement`.	`anchor`	`string`	`''`
`anchorElement` An element the snackbar appears above, such as a FAB or a docked toolbar: while open, the snackbar's bottom edge sits `--bottom-offset` above the element's top edge. Takes precedence over `anchor`.		`HTMLElement`	`null`
`closeLabel` Accessible label for the built-in dismiss button.	`close-label`	`string`	`'Close'`
`fixed` Whether the snackbar should be positioned relative to the viewport (fixed).	`fixed`	`boolean`	`false`
`hasCloseButton` Whether to display a close icon button.	`has-close-button`	`boolean`	`false`
`labelText` Supporting message text to display. Rendered before default slot content.	`label-text`	`string`	`''`
`open` Whether the snackbar is currently open.	`open`	`boolean`
`quick` Whether to skip opening and closing transition delays.	`quick`	`boolean`	`false`
`timeoutMs` Time in milliseconds before the snackbar automatically dismisses. Set to 0 or a negative value (e.g. -1) to disable auto-dismiss. Read when the snackbar opens; changing it while open takes effect on the next open.	`timeout-ms`	`number`	`5000`

Slots

Link to “Slots”

Slot	Description
default	Default slot for rich content (rendered after `label-text`). If both `label-text` and slotted content are provided, both render.
`action`	Slot for a custom action button; replaces the built-in action rendered from `action-label`. Prefer the `action-label` attribute, which renders a text button matching the spec. A slotted plain `<button>` is styled by the snackbar, with hover, focus and pressed states. A slotted text `<md-gb-button>` gets the `--action-label-text*` colors and typography, but keeps its own 16px padding and pressed shape, because its component tokens can't be set from outside its shadow root.
`dismiss`	Slot for dismiss button (falls back to close icon button when `has-close-button` is set).

Events

Link to “Events”

Event	Description
`close` CustomEvent<{reason: string}>	Fired when the snackbar begins closing.
`closed` CustomEvent<{reason: string}>	Fired when the snackbar has closed.
`open` Event	Fired when the snackbar begins opening.
`opened` Event	Fired when the snackbar has opened and animations finished.

Methods

Link to “Methods”

Method	Description
`close` (reason?: string) => Promise<void>	Closes the snackbar.
`render` () => TemplateResult<1>	Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's `ChildPart` - typically a `TemplateResult`. Setting properties inside this method will not trigger the element to update.
`show` () => Promise<void>	Opens the snackbar.
`updateAnchorPosition` () => void	Places the snackbar above its anchor. Called while open when the window or the anchor resizes; call it after moving the anchor.

CSS parts

Link to “CSS parts”

Part	Description
`::part(actions)`	The container wrapping action and dismiss slots.
`::part(label)`	The container wrapping the label content.
`::part(surface)`	The surface container of the snackbar.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--action-label-text`	Action button label typography.
`--action-label-text-axes`	Action button label typography font variation settings.
`--action-label-text-color`	Action button label text color.
`--action-label-text-tracking`	Action button label letter spacing.
`--bottom-offset`	Inset block end distance from container bottom, or from the top of the `anchor`.
`--container-color`	Container background color.
`--container-elevation`	Container box shadow elevation.
`--container-shape`	Container border radius.
`--icon-color`	Close icon color.
`--icon-size`	Close icon size.
`--max-width`	Maximum surface width in wide layout.
`--min-height`	Minimum surface height (the single-line height).
`--min-width`	Minimum surface width in wide layout.
`--position`	CSS position property (`absolute` by default).
`--supporting-text`	Supporting label typography.
`--supporting-text-axes`	Supporting label typography font variation settings.
`--supporting-text-color`	Supporting label text color.
`--supporting-text-tracking`	Supporting label letter spacing.
`--with-single-line-container-height`	Single-line container height (spec 48dp).
`--with-two-lines-container-height`	Two-line container height (spec 68dp).
`--z-index`	Z-index of the snackbar.

<md-gb-snackbar-host>

Link to “<md-gb-snackbar-host>”

Shows queued snackbars one at a time.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`anchor` The id of the element the built-in snackbar appears above, such as a FAB (see `md-gb-snackbar` `anchor`).	`anchor`	`string`	`''`
`anchorElement` The element the built-in snackbar appears above, such as a FAB.		`HTMLElement`	`null`
`closeLabel` Accessible label of the close icon button.	`close-label`	`string`	`'Close'`
`fixed` Whether the built-in snackbar is positioned in the viewport (fixed).	`fixed`	`boolean`	`false`
`quick` Whether to skip the snackbar's opening and closing motion.	`quick`	`boolean`	`false`

Slots

Link to “Slots”

Slot	Description
default	Optional `md-gb-snackbar` to show the messages in.

Events

Link to “Events”

Event	Description
`close` CustomEvent<{reason: string}>	Bubbles from the snackbar when it begins closing.
`closed` CustomEvent<{reason: string}>	Bubbles from the snackbar when it has closed.

Methods

Link to “Methods”

Method	Description
`dismissAll` () => void	Dismisses the current snackbar and every queued one.
`render` () => TemplateResult<1>	Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's `ChildPart` - typically a `TemplateResult`. Setting properties inside this method will not trigger the element to update.
`showSnackbar` (options: string	ShowSnackbarOptions) => Promise<SnackbarResult>

CSS parts

Link to “CSS parts”

Part	Description
`::part(snackbar)`	The built-in snackbar, when none is slotted.

Snackbar

Usage guidelines

Anatomy

Examples

Close button

Two lines

Consecutive snackbars

Anchor

Accessibility

Compatibility

API reference

<md-gb-snackbar>

Properties

Slots

Events

Methods

CSS parts

CSS custom properties

<md-gb-snackbar-host>

Properties

Slots

Events

Methods

CSS parts

Download & copy

Download

Copy

Customize theme