BreezeUI
  • English

    • 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.

    Component Features

    • 🎨 6 Visual Variants: Supports default, primary, success, warning, error, info.
    • 📐 4 Positions: Supports top-right, top-left, bottom-right, bottom-left.
    • ⏱️ Auto Close: Supports duration prop to control auto-close timing.
    • ❌ Dismissible: Supports swipe-to-dismiss and close button.
    • 🎬 Action Buttons: Supports custom action buttons.
    • 🖼️ Icon Support: Built-in icon for each variant type.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    The simplest notification.

    <template>
  <div>
    <BrNotificationProvider group="basic" />
    <BrButton @click="showNotification">Show Notification</BrButton>
  </div>
</template>

<script setup lang="ts">
import { useNotification, BrButton, BrNotificationProvider } from '@breezeui/vue'

const { toast } = useNotification()

function showNotification() {
  toast({
    group: 'basic',
    title: 'Schedule Reminder',
    description: 'You have a meeting starting in 15 minutes。',
  })
}
</script>

    Variants

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

    <template>
  <div class="flex gap-4 flex-wrap">
    <BrNotificationProvider group="variants" />
    <BrButton variant="outline" @click="show('default')">Default</BrButton>
    <BrButton color="primary" @click="show('primary')">Primary</BrButton>
    <BrButton color="success" @click="show('success')">Success</BrButton>
    <BrButton color="danger" @click="show('error')">Error</BrButton>
    <BrButton color="warning" @click="show('warning')">Warning</BrButton>
    <BrButton color="info" @click="show('info')">Info</BrButton>
  </div>
</template>

<script setup lang="ts">
import { useNotification, BrButton, BrNotificationProvider } from '@breezeui/vue'
import type { NotificationVariant } from '@breezeui/vue'

const { toast } = useNotification()

function show(variant: NotificationVariant) {
  toast({
    group: 'variants',
    title: variant.charAt(0).toUpperCase() + variant.slice(1) + ' Notification',
    description: 'This is a ' + variant + ' notification.',
    variant,
  })
}
</script>

    Positions and Duration

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

    <script setup lang="ts">
import { ref } from 'vue'
import { BrButton, BrNotificationProvider, useNotification } from '@breezeui/vue'
import type { NotificationPosition } from '@breezeui/vue'

const { toast, dismiss } = useNotification()

const position = ref<NotificationPosition>('top-left')
const duration = ref(2800)

const positionOptions: { label: string; value: NotificationPosition }[] = [
  { label: 'top-left', value: 'top-left' },
  { label: 'top-right', value: 'top-right' },
  { label: 'bottom-left', value: 'bottom-left' },
  { label: 'bottom-right', value: 'bottom-right' },
]

function notify() {
  toast({
    group: 'positions',
    title: 'Custom Position',
    description: `position=${position.value} duration=${duration.value}ms`,
    duration: duration.value,
  })
}

function spam() {
  for (let i = 1; i <= 4; i += 1) {
    toast({
      group: 'positions',
      title: `Notification ${i}`,
      description: 'Stacked display',
      duration: duration.value + i * 250,
      variant: i % 2 === 0 ? 'primary' : 'default',
    })
  }
}
</script>

<template>
  <div class="space-y-6">
    <BrNotificationProvider group="positions" :position="position" :duration="duration" />

    <!-- Position Selection -->
    <div class="space-y-3">
      <div class="text-sm font-medium text-muted-foreground">Select Position</div>
      <div class="flex flex-wrap gap-2">
        <BrButton
          v-for="opt in positionOptions"
          :key="opt.value"
          :variant="position === opt.value ? 'solid' : 'outline'"
          :color="position === opt.value ? 'primary' : 'default'"
          size="sm"
          @click="position = opt.value"
        >
          {{ opt.label }}
        </BrButton>
      </div>
    </div>

    <!-- Controls -->
    <div class="flex flex-wrap items-end gap-4">
      <div class="space-y-1.5">
        <label class="text-sm font-medium text-muted-foreground">Duration (ms)</label>
        <input
          v-model.number="duration"
          type="number"
          min="500"
          step="100"
          class="flex h-9 w-32 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
        />
      </div>

      <div class="flex flex-wrap gap-2">
        <BrButton @click="notify">Show Notification</BrButton>
        <BrButton variant="outline" @click="spam">Stack Notifications</BrButton>
        <BrButton variant="outline" @click="dismiss()">Dismiss All</BrButton>
      </div>
    </div>
  </div>
</template>

    With Action

    You can add action buttons to handle user interactions.

    <template>
  <div>
    <BrNotificationProvider group="action" />
    <BrButton @click="showAction">With Action Button</BrButton>
  </div>
</template>

<script setup lang="ts">
import { useNotification, BrButton, BrNotificationProvider } from '@breezeui/vue'

const { toast } = useNotification()

function showAction() {
  toast({
    group: 'action',
    title: 'Update Available',
    description: 'New version v1.2.0 has been released。',
    action: {
      label: 'Update Now',
      onClick: () => console.log('Update clicked'),
    },
  })
}
</script>

    API

    BrNotification

    PropertyTypeDefaultDescription
    titlestring-The title of the notification
    descriptionstring-The description of the notification
    variant'default' | 'primary' | 'success' | 'error' | 'warning' | 'info''default'The variant of the notification
    durationnumber5000The time in milliseconds before auto-dismissal
    dismissiblebooleantrueWhether to show the dismiss button
    actionNotificationAction-Configuration for the action button
    iconComponent-Custom icon component

    BrNotificationProvider

    PropertyTypeDefaultDescription
    position'top-left' | 'top-right' | 'bottom-left' | 'bottom-right''bottom-right'Position of the notifications
    durationnumber5000Default auto-dismissal time
    swipeDirection'up' | 'down' | 'left' | 'right''right'Direction for swipe-to-dismiss
    swipeThresholdnumber50Threshold for swipe-to-dismiss

    useNotification

    MethodParametersReturn TypeDescription
    toastprops: Omit<NotificationProps, 'id'>{ id, dismiss, update }Creates and shows a notification
    dismissid?: 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>

    TailwindCSS Override

    You can override styles directly via the class property.

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