Snackbar

Material Design 3 snackbar web component, built on the native Popover API.

1.8 KB gzipped
@lit-material/snackbar 0.0.5
Renders on the server

Example

Install

npm install @lit-material/snackbar @lit-material/tokens

import "@lit-material/snackbar";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-snackbar>`

Material Design 3 snackbar — a brief, non-modal status message, built on the native Popover API in manual mode for top-layer rendering without any of the automatic light-dismiss behavior auto mode has (a snackbar shouldn't disappear just because the user clicked elsewhere on the page).

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`
`duration`	`duration`	`number`	`5000`	Auto-dismiss timeout in ms. Set to 0 to disable auto-dismiss entirely.
`closable`	`closable`	`boolean`	`false`	Shows a trailing "×" button that dismisses the snackbar.

Events

Event	Description
`close`	Fires after the snackbar closes, for any reason (timeout, the action, the close button, or `close()`).

Slots

Slot	Description
default	The message text.
`action`	An optional action (e.g. a `lit-material-button variant="text"`). Activating it closes the snackbar, same as `closable`'s dismiss button.

CSS parts

Part	Description
`snackbar`	The surface (background, padding, shape, elevation).
`close-button`	The trailing dismiss button, when `closable`.

Source on GitHub npm