Notification

Built on top of Radix Vue's Toast component, providing flexible notification features. Supports multiple variants, position configuration, auto-dismissal, swipe-to-dismiss, and more.

Based on BrConfigProvider for global theme configuration, supporting both component and function call styles.

Basic Usage

The simplest notification.

Example

Variants

Supports 6 variants: default, primary, success, error, warning, info.

Example

Positions and Duration

You can configure the popup position (top-left/top-right/bottom-left/bottom-right) and auto-dismiss duration via BrNotificationProvider.

Select Position

Duration (ms)

Example

With Action

You can add action buttons to handle user interactions.

Example

API

BrNotification

Property	Type	Default	Description
title	string	-	The title of the notification
description	string	-	The description of the notification
variant	'default' | 'primary' | 'success' | 'error' | 'warning' | 'info'	'default'	The variant of the notification
duration	number	5000	The time in milliseconds before auto-dismissal
dismissible	boolean	true	Whether to show the dismiss button
action	NotificationAction	-	Configuration for the action button
icon	Component	-	Custom icon component

BrNotificationProvider

Property	Type	Default	Description
position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'bottom-right'	Position of the notifications
duration	number	5000	Default auto-dismissal time
swipeDirection	'up' | 'down' | 'left' | 'right'	'right'	Direction for swipe-to-dismiss
swipeThreshold	number	50	Threshold for swipe-to-dismiss

useNotification

Method	Parameters	Return Type	Description
toast	props: Omit<NotificationProps, 'id'>	{ id, dismiss, update }	Creates and shows a notification
dismiss	id?: string	-	Dismisses a notification by id. If no id is provided, dismisses all
toasts	-	Ref<NotificationProps[]>	Reactive list of all current notifications

Theming

Global Configuration (BrConfigProvider)

You can configure global style variables for Notification via BrConfigProvider.

<template>
  <BrConfigProvider :theme="themeConfig">
    <BrNotificationProvider>
      <App />
    </BrNotificationProvider>
  </BrConfigProvider>
</template>

<script setup>
const themeConfig = {
  radius: 0.5,
  primary: '#3b82f6',
  success: '#22c55e',
  error: '#ef4444',
  warning: '#f59e0b',
  info: '#3b82f6',
  zNotification: 200, // Custom z-index
}
</script>

TailwindCSS Override

You can override styles directly via the class property.

toast({
  title: 'Custom Style',
  class: 'bg-purple-500 text-white border-none',
})