Overview
The KSnackbar component provides a notification system for displaying
non-critical messages to users. While typically managed globally, it also supports isolated
local instances. It features action buttons, custom timing, focus management, and full
keyboard accessibility.
When multiple snackbars are triggered, new messages automatically replace the current one
with a smooth transition. For status updates that need to change text without animation, use
forceReuse.
- Global or local notification state via provided composables
- Optional action button for quick follow-up actions
- Auto-hide with configurable duration (or persistent mode)
- Backdrop mode for higher-priority messages
- Bottom offset support for layouts with bottom navigation
Usage
In most applications, the KSnackbar component serves as a root-level mount
point for global notifications. Developers should not interact with this
component directly to show messages, but rather use the provided composables.
Global Setup
Place a single KSnackbar component in your application's root template (e.g.,
App.vue) and bind it to the state provided by the
useKSnackbar
composable.
For interactive examples (Basic, With Action, Persistent, Force Reuse, etc.), please see the useKSnackbar composable page.
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
isOpen | Controls whether the snackbar is visible | boolean | — | true |
text | The main message text displayed in the snackbar.
Also used for live-region announcements even when the #text slot is used. | string | — | true |
actionText | Optional text for an action button (e.g. "Undo") | string |
''
| — |
bottomOffset | Additional bottom offset in pixels.
Useful when a bottom navigation bar is present | number |
0
| — |
backdrop | If true, shows a darkening backdrop behind the snackbar and sets
focus to the snackbar. Used for critical messages | boolean |
false
| — |
announce | Whether to trigger a live-region announcement for screen readers.
Explicitly required for each usage via the composable. | boolean |
undefined
| — |
assertive | When true and announce is true, uses an assertive live region.
Use sparingly, only for critical errors. | boolean |
false
| — |
autofocus | If true, autofocuses the action button when snackbar appears | boolean |
false
| — |
autoDismiss | If true, the snackbar will auto-dismiss after the duration | boolean |
true
| — |
duration | Duration in milliseconds before auto-dismissing (if autoDismiss is true) | number |
5000
| — |
Events
| Name | Description |
|---|---|
blur | Emitted when the action button loses focus. |
actionClick | Emitted when the action button is clicked. |
show | Emitted when the snackbar enters the screen. |
hide | Emitted when the snackbar leaves the screen. |
close | Emitted when the snackbar is closed (e.g., via auto-dismiss or Esc key). |
Slots
| Name | Description |
|---|---|
text | Optional slot as an alternative to the text prop for the message |