useSnackbarAction

Imperative snackbar API for toast notifications from anywhere in the app.

Introduction

useSnackbarAction opens toast notifications imperatively. Call open() with title, description, and optional actions instead of declaring <Snackbar> in your template.

Stack position, max visible count, and default timeout are configured on BridgeSnackbarHost via BridgeUIHosts.

Use the framework selector in the site header to switch between React and Vue.

Import

import { BridgeUIHosts } from "@bridge-ui/vue/Actions";
import { useSnackbarAction } from "@bridge-ui/vue/Actions";

import { BridgeUIHosts } from "@bridge-ui/react/Actions";
import { useSnackbarAction } from "@bridge-ui/react/Actions";

Setup

Configure host defaults on BridgeUIHosts inside BridgeUIProvider:

<BridgeUIHosts :snackbar="{ max: 3, timeout: 5000, position: 'bottom-center' }">
  <!-- routes / pages -->
</BridgeUIHosts>

<BridgeUIHosts snackbar={{ max: 3, timeout: 5000, position: "bottom-center" }}>
  {children}
</BridgeUIHosts>

Basic usage

Options

Override per-entry color, padding, rounded, and transition on open().

Actions

Footer actions support accept and reject buttons with optional onClick handlers.

rightButtons

Set rightButtons: true to render actions in a vertical column on the right side of the snackbar.

close / closeTop / closeAll / stack

Snackbars stack up to the host max. Use close(id), closeTop(), or closeAll() to dismiss programmatically.

Callbacks

onClose and onClosed fire when a snackbar is dismissed by the user, timer, or imperative API.

update

Patch an open snackbar with update(id, { props }) to change title, color, or actions without reopening.

API

open options

Related

Snackbar, Alert