Components / Library Version 5.27.0

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 a link or a button.

PropertiesExamplesAPIAccessibilityNotes

Properties

* Required property

notifications *
string
Required. An array of notification objects. Pass an empty array to clear all notifications. 
{
  id: string;
  message: string;
  link?: string;
  newWindow?: boolean;
  action?: string;
}
Use link for a navigational link and action for a button (e.g. "Undo"). Both look the same but convey different semantics. Both trigger the wmSnackbarActionTriggered event when clicked.

Usage in HTML

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

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.
wmSnackbarSnackFinished
This event fires when a snackbar should disappear from the screen. Use it to remove the item from the list of messages in the notifications array. The event is emitted when:
  • the user tabs out of the snackbar
  • the user clicks the close button
  • after 6 seconds (except if the snackbar has a link or an action button, in which case it should only be dismissed by user action)
wmSnackbarActionTriggered
Emitted when the user clicks on the snackbar link or action button. 
{
  id: string;
  message: string;
  link?: string;
  newWindow: boolean;
  action?: string;
}

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 6 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.

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.

The snackbar component renders the notifications passed to it via the notifications property. When a user deletes a notification or when the snackbar times out, the component emits an event which should be used to update the notifications list.

The snackbar emits an event when the link or action button is clicked. For links this should be used to redirect to the appropriate resource. For action buttons this should be used to trigger the appropriate behaviour.
Back to Top