Snackbar

Toast notification portaled to the viewport.

Introduction

Snackbars (also known as toasts) appear temporarily and float above the UI to provide brief, non-critical updates—saved successfully, message sent, or undo available.

Snackbar vs Alert: Snackbars have a fixed viewport position, a high stacking order, and auto-dismiss by default—they break out of the document flow. Alert messages are usually inline, part of the page layout, and remain visible until removed. Use Snackbar for transient process feedback; use Alert for persistent status on a form, page section, or settings panel. You can nest an Alert inside a Snackbar when you need both toast behavior and semantic severity styling.

Import

import { Snackbar } from "@bridge-ui/vue/Components/Snackbar";

import { Snackbar } from "@bridge-ui/react/Components/Snackbar";

Basic usage

Control visibility with v-model or :model-value with @show-change. Pair with a trigger such as a Button to open the snackbar.

Control visibility with show and onShowChange. Pair with a trigger such as a Button to open the snackbar.

Colors

Use the color prop to tint the default icon and progress bar. Available colors: primary, secondary, success, info, warning, error, and dark.

Positions

Anchor the snackbar on the viewport with the position prop. Available positions: top-start, top-center, top-end, bottom-start, bottom-center (default), and bottom-end. Ignored when teleportTo={false}.

Duration

Set duration (in milliseconds) to auto-dismiss the snackbar. Pass false to disable the timer. Enable progressbar to show a countdown indicator while the timer is active.

Transitions

Set transition to slide (default), fade, or none for enter/leave animation.

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (default: lg).

Slots

Override icon, title, and description with slots for custom content.

Alert, Button

Accessibility

Snackbar sets role="status" and aria-live="polite" by default so screen readers announce messages without interrupting current tasks.
Users can dismiss the snackbar with the close button when closeButton is enabled (default).
Provide enough duration for users to read the message before auto-dismiss.
Keep titles and descriptions concise. Avoid relying on color alone to convey meaning—pair color with clear text.

Anatomy

<div> <!-- root (portaled, role="status") -->
  <div> <!-- content -->
    <svg> <!-- icon or img -->
    <div> <!-- title -->
    <div> <!-- description -->
    <div> <!-- actions slot (optional) -->
    <button> <!-- close button -->
  </div>
  <div> <!-- progressbar (when duration is set) -->
</div>

Target internal parts with the classes prop and override slots for custom icon, title, description, or action content.

API

Prop / event	Type	Default	Description
v-model	boolean	—	Two-way binding for visibility.
@close	—	—	Emitted when the snackbar requests to close (close button, Escape, or timer). Not emitted when the parent sets v-model to false directly.
@show-change	(show: boolean) => void	—	Emitted when visibility should change. Use with :model-value for controlled state.
@leave-complete	—	—	Emitted after the leave transition when v-model is already false. Used internally by BridgeSnackbarHost.

Prop	Type	Default	Description
show	boolean	—	Whether the overlay is visible. Use with onShowChange for controlled state.
onShowChange	(show: boolean) => void	—	Called when visibility changes.
onClose	() => void	—	Called when the snackbar requests to close (close button, Escape, or timer). Not called when the parent sets show={false} directly.

Prop	Type	Default	Description
title	string	—	Headline text.
description	string	—	Body text below the title.
color	SnackbarColor	"primary"	Tint color for the default icon.
position	SnackbarPosition	"bottom-center"	Viewport anchor when portaled.
duration	number \| false	5000	Auto-dismiss delay in ms. false disables the timer.
progressbar	boolean	true	Show countdown progress bar when duration is set.
closeButton	boolean	true	Whether to show the close button.
icon	IconSource \| null	—	Custom icon or null to hide.
img	string	—	Avatar image URL (shown instead of icon when set).
padding	SnackbarPadding	"medium"	Padding for the content area.
rounded	SnackbarRounded	"lg"	Border radius of the snackbar panel.
transition	SnackbarTransition	"slide"	Enter/leave animation preset.
teleportTo	string \| false	"body"	Portal target. false renders inline.
classes	SnackbarClasses	—	Classes for internal parts.
customProps	SnackbarCustomProps	—	Props forwarded to internal parts.
slots	SnackbarSlots	—	React slots: icon, title, description, actions.