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.
* Required property
Required. An array of objects with
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.
Example code for functionality.
Usage in Elm
Code generated from HTML.
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.
- 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.
Snackbar with link
|Shift + Tab||
To clear the snackbars, simply set the notifications property to an empty string.
In a compound component like Select or Action Menu, child components are rendered in the parent's
slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like
<wm-option>, text content, or other child elements.
The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.
With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.
Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.