Toast

Toast displays brief, temporary notifications that provide feedback without interrupting the user's workflow. It supports automatic closing, manual closing, stacking, progress bars, ESC key closing, responsive viewport adaptation, and show/hide animations.

BrToast uses BrConfigProvider for global theme configuration (colors, radius, shadows, z-index, etc.), and supports both component-based and function-based invocation.

Basic Usage

Click the button to show a default Toast (auto-close + manual close).

Example

Variants

Use the variant prop to control the visual style of the Toast:

• Default: Default style
• Primary: Primary style
• Success: Success style
• Error: Error style
• Warning: Warning style
• Info: Info style

Example

Positioning & Stacking

Supports 8 positions (top/top-left/top-center/top-right/bottom/bottom-left/bottom-center/bottom-right), along with stacking and progress bars.

Select Position

Duration (ms)

Example

Theming

Use BrConfigProvider to globally configure default position, radius, shadow, variant colors, and z-index. You can also use utility classes for local overrides.

Global Customization (BrConfigProvider)

Theme Preview

Configure Toast tokens and default behavior globally via BrConfigProvider

Example

Local Override (TailwindCSS Classes)

Example

API

BrToast

Prop	Type	Default	Description
open	boolean	undefined	Controlled open state (use with @update:open/v-model:open).
defaultOpen	boolean	false	Uncontrolled initial open state.
duration	number	undefined	Auto-close duration (ms) for this toast. Overrides Provider's duration.
variant	'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'	'default'	Visual variant style.
position	BrToastPosition	undefined	Position for this toast. Overrides Provider/BrConfigProvider.
dismissible	boolean	true	Whether to show close button and allow manual closing.
showProgress	boolean	false	Whether to show auto-close progress bar (requires duration > 0).
title	string | Component	undefined	Title content (or use #title slot).
description	string | Component	undefined	Description content (or use #description slot).
icon	Component	undefined	Icon content (or use #icon slot).
class	string	''	Additional TailwindCSS classes for local style overrides.

BrToastProvider

Prop	Type	Default	Description
position	BrToastPosition	undefined	Overrides BrConfigProvider's default position.
duration	number	undefined	Overrides BrConfigProvider's default auto-close duration (ms).
closeDelay	number	undefined	Delay (ms) before removing from stack after closing, to preserve exit animation.
max	number	undefined	Maximum number of stacked toasts. Older toasts are removed when exceeded.
closeOnEscape	boolean	undefined	Whether to allow closing the latest toast with ESC key.
viewportClass	string	''	Additional classes for the Viewport, for local layout overrides.

useToast

Field	Type	Default	Description
toast	(options: BrToastOptions) => { id, dismiss, update }	-	Triggers a toast and returns a handle (can update/dismiss).
dismiss	(id?: string) => void	-	Dismisses a specific toast. If id is omitted, dismisses all.
update	(id: string, patch: BrToastOptions) => void	-	Updates a specific toast's configuration (title/description/variant/duration etc.).
toasts	Ref<BrToastItem[]>	-	Current list of toasts (for custom rendering scenarios).