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, dark, and black.

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

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

Prop	Type	Default	Description
classes	SnackbarClasses	—	Classes for internal parts.
closeButton	boolean	true	Whether to show the close button.
color	SnackbarColor	"primary"	Tint color for the title, default icon, and progress bar.
customProps	SnackbarCustomProps	—	Props forwarded to internal parts.
description	string	—	Body text below the title.
duration	number \| false	5000	Auto-dismiss delay in ms. false disables the timer.
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.
position	SnackbarPosition	"bottom-center"	Viewport anchor when portaled.
progressbar	boolean	true	Show countdown progress bar when duration is set.
rounded	SnackbarRounded	"lg"	Border radius of the snackbar panel.
slots	SnackbarSlots	—	React slots: icon, title, description, actions.
teleportTo	string \| false	"body"	Portal target. false renders inline.
title	string	—	Headline text.
transition	SnackbarTransition	"slide"	Enter/leave animation preset.