Snackbar

The snackbar component renders a notification at the bottom of the screen to provide feedback to the user. In addition to a message, the notification can also include an action for the user to take.

The snackbar component will render any notifications passed to it as a prop. When a user deletes a notification or when the snackbar times out, the component will emit an event so that the app can update its notifications on state. The snackbar will also emit an event if a user clicks the notification link so that the app can run the corresponding action.

Properties

Examples

Events

Accessibility

Notes

* Required property

notifications *

string

Required. An array of objects with id, message, and link. If the link should open in a new window include newWindow: true. For notifications without link, pass an empty string as the link value. Pass an empty array when no notifications should be rendered or when you want to clear the notifications.

Usage in HTML

Edit the code below to see changes reflected in the example above.

<wm-button id="sb" button-type="primary" onClick="addSnack()">Snackbar</wm-button>
<wm-button id="sb-link" button-type="primary" onClick="addSnackWithLink()">Snackbar with Link</wm-button>
<wm-button id="sb-new-window-link" button-type="primary" onClick="addSnackWithNewWindowLink()">Snackbar with New Window Link</wm-button>
<wm-snackbar notifications="[]" id="wm-snackbar-example"></wm-snackbar>

Javascript Sample

Example code for functionality.

const snackbar = document.getElementById("wm-snackbar-example");
let notifications = []

function addSnack() {
  const snackbar = document.getElementById("wm-snackbar-example")
  const randomId = `snack-${Math.floor(Math.random() * 100) + 1}`;
  const newNotification = {
    id: randomId,
    message: "I'm a snackbar.",
    link: "",
  };
  notifications = [newNotification, ...notifications];
  snackbar.notifications = JSON.stringify(notifications);
}

function addSnackWithLink() {
  const snackbar = document.getElementById("wm-snackbar-example")
  const randomId = `snack-${Math.floor(Math.random() * 100) + 1}`;
  const newNotification = {
    id: randomId,
    message: "I'm a snackbar with a link.",
    link: "View snack detail",
  };
  notifications = [newNotification, ...notifications];
  snackbar.notifications = JSON.stringify(notifications);
}

function addSnackWithNewWindowLink() {
  const snackbar = document.getElementById("wm-snackbar-example")
  const randomId = `snack-${Math.floor(Math.random() * 100) + 1}`;
  const newNotification = {
    id: randomId,
    message: "I'm a snackbar with a new window link.",
    link: "View new window",
    newWindow: true
  };
  notifications = [newNotification, ...notifications];
  snackbar.notifications = JSON.stringify(notifications);
}

function showSnackDetail(ev) {
  if (ev.detail.newWindow) {
    alert("Opens a new window.");
  } else {
    const dialog = document.getElementById("snackbar-link-dialog");
    dialog.open = "true";
  }
}

function dismissSnack(ev) {
  const snackbar = document.getElementById(ev.target.id);
  notifications = notifications.filter(
    (snack) => snack.id !== ev.detail.id
  );
  snackbar.notifications = JSON.stringify(notifications);
}

snackbar.addEventListener("wmSnackbarActionTriggered", showSnackDetail);
snackbar.addEventListener("wmSnackbarSnackFinished", dismissSnack);

Usage in Elm

Code generated from HTML.

wmSnackbarSnackFinished

Emitted after 20 seconds or when the user clicks the close button. For snackbars with links, the behavior changes if the user is navigating with the keyboard. In this case, the link receives focus when the snackbar appears, and the timer is disabled. The event is emitted when the user tabs out of the snackbar or presses the close button. This ensures that the user can access the link. Replaces the deprecated userFinishedSnack.

wmSnackbarActionTriggered

Emitted when the user clicks on the snackbar link. Replaces the deprecated userTriggeredAction.

The component renders an aria live region. The live region updates without a page reload. Changes to it (in this case, new notifications) are announced by screenreaders.

Screen Readers

Snackbar

does not gain focus.
disappears automatically after 20 seconds.

Snackbar with link

When the snackbar appears, the link in the snackbar gains focus.
The timer is disabled.
When the user tabs out of the snackbar or actively dismisses it, focus returns to where they were before the snackbar appeared.

Keyboard Support

Snackbar

None.

Snackbar with link

Key	Function
`Tab`	From link, tab moves focus to the close button. From the close button, tab dismisses the snackbar and moves focus back to where the user was before the snackbar appeared.
`Shift + Tab`	From link, shift+tab dismisses the snackbar and moves focus back to where the user was before the snackbar appeared. From close button, shift+tab moves focus to the link.
`Enter`	Activates the close button. Actives the link.

To clear the snackbars, simply set the notifications property to an empty string.