The @m3e/web/snackbar module provides the M3eSnackbar global service on window (globalThis) used to present short updates about application processes at the bottom of the screen from anywhere in an application.

import "@m3e/web/snackbar";

This section outlines usage examples and configuration guidance for the components in this package.

Use the open method of the M3eSnackbar service to open a snackbar.

M3eSnackbar.open("File deleted");

You can include a single action and callback when opening a snackbar message.

M3eSnackbar.open("File deleted", "Undo", {
  actionCallback: () => {
    // Undo logic here
  },
});

A snackbar message can optionally include a dismiss button.

M3eSnackbar.open("File deleted", true);

When opening a snackbar message, you can pass a SnackbarOptions object that includes the following properties.

• duration?: number — The length of time, in milliseconds, to wait before automatically dismissing the snackbar.
• closeLabel?: string — The accessible label given to the close button used to dismiss the snackbar.
• actionCallback?: () => void — The callback function invoked when the action is clicked.

Snackbar messages are given ARIA role="status" and aria-live="polite", indicating that they are polite live regions intended to be announced by assistive technologies without requiring focus.

The @m3e/web package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/web/dist/snackbar.js"></script>

In addition, you must use an import map to include additional dependencies.

<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
      "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
      "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
      "lit-html/directives/class-map.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/class-map.js",
      "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
      "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
      "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js",
      "@m3e/web/button": "/node_modules/@m3e/web/dist/button.js",
      "@m3e/web/icon-button": "/node_modules/@m3e/web/dist/icon-button.js"
    }
  }
</script>

For production builds, use the minified files to ensure optimal load performance.

The @m3e/web package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.