Snackbars are designed to provide information to users at a glance without limiting application functionality. Snackbars are self-dismissing, and should be considered a ‘low priority’ status notification. Due to the transient nature of these messages, the design has been optimized to boost contrast, helping to ensure that the message can be acknowledged without forcing the user to interact.
Snackbars are best used to provide the status of a user-initiated background task. Snackbars may present redundant information to a user, mainly to inspire trust that the application is working as expected. Snackbars may alternatively present messages about the failure or delay of a process as long as it does not require immediate interaction.
An individual Snackbar works only in the context of the entire viewport. It contains a small message and an optional button. Snackbars will auto-dismiss unless they are either dismissed by the optional button, or
esc is pressed while they have focus. A Snackbar will cancel the auto-dismiss while it has focus or the user is hovering.
|modelValue||current value that determines if the snackbar is visible|
|timeout||time in ms a snackbar remains on the screen before auto-dismissing|
update:modelValue- emits when the Snackbar has been dismissed
closed- emits after the above when the Snackbar has furthermore completely finished its closing animation
default- use to insert the main text
button- use to insert the optional button
feather-snackbar- the main Snackbar element
feather-snackbar-content- the wrapper around the text content
feather-snackbar-button- the wrapper around the button slot
A Snackbar Group is simply a container that organises multiple Snackbars and enables them to be queued and optionally placed in a different relative container. Snackbars that are set to visible in a container will be queued automatically and displayed sequentially in order.
|target||an optional DOM selector that determines where the snackbars should be rendered in the DOM. Can be used with |
|relative||for use in a |
default- use to insert the Snackbars
feather-snackbar-group- the main Snackbar Group element