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.


modelValuecurrent value that determines if the snackbar is visibleBooleanfalsefalse
centerwhen true, positions the Snackbar in the center of the containing elementBooleanfalsefalse
timeouttime in ms a snackbar remains on the screen before auto-dismissingNumberfalse4000
errorwhen true, adds a special color to the Snackbar to indicate an error statusBooleanfalsefalse


  • 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

Snackbar Group

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.


targetan optional DOM selector that determines where the snackbars should be rendered in the DOM. Can be used with relative to constrain snackbars to a specific containerStringfalsebody
relativefor use in a position: relative; container, ensures the Snackbars will be positioned within its boundariesBooleanfalsefalse


  • default - use to insert the Snackbars


  • feather-snackbar-group - the main Snackbar Group element