Quaff

QSnackbar

Snackbars show brief updates without interrupting the current task. Display a message with an optional action or dismiss button.

info QSnackbar API Source
interface QSnackbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">
action
?: QSnackbarAction = undefined
Optional button action, defined by a label and optional click handler.
actionOnNewLine
?: boolean = false
Places the action below the message.
dismissLabel
?: string = "Dismiss"
Accessible label applied to the close button's aria-label.
dismissible
?: boolean = false
Shows a close button.
message
?: string = undefined
Message displayed by the snackbar.
offset
?: number | string = 12
Distance from the bottom viewport edge in pixels or as a CSS length.
onDismiss
?: (reason: QSnackbarDismissReason) => void = undefined
Called when dismissal starts.
onHidden
?: () => void = undefined
Called after the snackbar has left the screen.
timeout
?: number = 6000
Auto-dismiss delay in milliseconds. Values other than zero are constrained to the Material Design range of 4000–10000 milliseconds. Snackbars with actions or a close button do not auto-dismiss.
value
?: boolean = $bindable(false)
The bound value of the component.

Usage

Basic Snackbar
Plain snackbars close automatically after six seconds. On the web, also show the same message next to the control that caused it, so users can read it for as long as needed.
Snackbar with Action
A snackbar can have one text action. It stays visible until the user selects the action or closes the snackbar.
Item available
Close Button
Set dismissible when users need a close button. Like an action, the close button keeps the snackbar visible until the user closes it.
Longer Action
Put a long action on a new line so the message still has enough room.
Placement
Snackbars appear at the bottom of the screen. Use offset to keep them above bottom navigation, floating buttons, or other important controls. Show only one snackbar at a time.
Accessibility
Snackbar messages use a polite live region and never move focus automatically. Snackbars with an action do not close automatically. Use Tab to reach their controls and press Escape while focused to close.
Component or Notify
Use QSnackbar when one component controls when it is shown. For app-wide notifications that should appear one after another, use the Notify API.
Privacy Policy