Snackbar

A web component for timed snackbar notifications that stack at the screen edge and pause while being read.

A short update about an app process, shown at the anchored edge of the screen.

Installation

npm install @3mo/snackbar

import '@3mo/snackbar'

Usage

<mo-button @click=${() => Snackbar.notifyInfo('Changes saved')}>Save</mo-button>

Examples

• Types — Each type brings its own color and icon; a warning stays 10 seconds and an error 15, where the others go after 5.
• Actions — actions add buttons to the snack-bar, and each one keeps it open 2.5 seconds longer.
• Stacking — Up to three snack-bars lay out as a list; more pile up behind the third.

Accessibility

A status, or an alert for a warning or an error. It stays 5 seconds, 10 for a warning and 15 for an error, plus 2.5 per action, and hovering or focusing the snackbars holds them.

API

mo-snackbar

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | open | open | boolean | false | Whether the snack-bar is currently shown | | type | type | NotificationType | "info" | The notification type which controls the accent color and icon | | text | text | string | "" | The message, taken from the notification. | | notification | notification | Notification | | The notification shown, with its message, type and actions; Snackbar.notify… sets it. |

CSS custom properties

| Name | Description | | --- | --- | | --mo-snackbar-color | The accent color of the snack-bar. Defaults to a color derived from the notification type. |

CSS parts

| Name | Description | | --- | --- | | surface | The snack-bar's surface |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH