Overview

#

A composable that offers the createSnackbar, clearSnackbar, and setSnackbarText functions, as well as the reactive snackbarIsVisible and snackbarOptions refs. It is used to manage a global snackbar state, allowing any component to trigger a snackbar without having to pass props deeply. This composable automatically handles setting the ARIA live node for screen readers when the announce option is enabled.

Usage

#

Before using this composable to show messages, ensure you have mounted the root component. For instructions, please see the KSnackbar global setup.

Examples

Basic snackbar

Use the default behavior for short confirmation messages.

Snackbar with action

Provide actionText and actionCallback when calling createSnackbar() to enable an immediate action such as Undo. The callback is stored in the composable and executed when the user clicks the action button.

Persistent snackbar

Set autoDismiss: false to keep the snackbar visible until explicitly dismissed. When using this option, always provide a way to close the snackbar, either via actionText, an onBlur callback, or a programmatic clearSnackbar() call, otherwise it will remain on screen indefinitely.

Snackbar with bottom offset

Use bottomOffset when a bottom navigation bar or fixed footer is present.

Update snackbar without transition

Use forceReuse to update the snackbar text in place without replaying the transition animation. Note that doing this purposely resets the auto-hide timer and re-triggers the screen reader announcement. Useful for status updates like connection state changes.

Snackbar with autofocus

Set autofocus: true to immediately focus the action button when the snackbar appears. Useful for critical actions that need immediate attention.

Snackbar with onBlur handling

Provide an onBlur callback to handle advanced focus management scenarios, such as auto-dismissing when the user tabs away. The callback fires when either the snackbar itself or its action button loses focus.

Snackbar with backdrop

Set backdrop: true to display a darkening backdrop behind the snackbar and trap keyboard focus. Useful for higher-priority messages that require user focus.

Advanced: Local snackbars

#

By default, useKSnackbar controls a global application-wide snackbar instance. However, if you need a localized snackbar (for instance, to pass a custom slot with a <KIcon> component inside), you can use the useKLocalSnackbar named export.

Note that this advanced usage requires placing a separate <KSnackbar> component within your template and binding the local composable's state manually, rather than relying on the globally installed snackbar.

      import { useKLocalSnackbar } from 'kolibri-design-system/lib/composables/useKSnackbar';

      export default {
        setup() {
          const {
            snackbarIsVisible,
            snackbarOptions,
            createSnackbar,
            clearSnackbar,
          } = useKLocalSnackbar();

          const notifyInfo = () => createSnackbar({ text: 'Task completed', announce: true });

          return {
            snackbarIsVisible,
            snackbarOptions,
            clearSnackbar,
            notifyInfo
          };
        }
      };
    

In the template where this is used, you manage the KSnackbar component yourself:

      <KSnackbar
        :isOpen="snackbarIsVisible"
        :text="snackbarOptions.text"
        :announce="snackbarOptions.announce"
        @close="clearSnackbar"
      >
        <template #text="{ text }">
          <KIcon icon="warning" />
          {{ text }}
        </template>
      </KSnackbar>
    

Parameters

#

createSnackbar accepts an options object with the following properties:

Related

#

• KSnackbar for the snackbar component
• Snackbars has design guidelines and usage guidance