NotificationBell

Bell button with unread counter that opens a dropdown list of notifications. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiNotificationBell } from '@ziyarago/ui/vue'

Unread

Vue

<UiNotificationBell
  :items="[{ id: 1, title: 'Booking confirmed', message: 'Hilton Makkah, 5 nights', time: '2 min ago' }, { id: 2, title: 'Payment received', message: '$1,240 from Aziz K.', time: '1 h ago' }, { id: 3, title: 'Visa approved', message: 'Group UM-14', time: 'Yesterday', read: true }]"
 />

All read

Vue

<UiNotificationBell
  :items="[{ id: 1, title: 'Visa approved', message: 'Group UM-14', time: 'Yesterday', read: true }]"
 />

Sizes

Vue

<UiNotificationBell
  :items="[{ id: 1, title: 'Booking confirmed', message: 'Hilton Makkah,  5 nights', time: '2 min ago' }]"
  size="xs"
 />

<UiNotificationBell
  :items="[{ id: 1, title: 'Booking confirmed', message: 'Hilton Makkah,  5 nights', time: '2 min ago' }]"
  size="sm"
 />

<UiNotificationBell
  :items="[{ id: 1, title: 'Booking confirmed', message: 'Hilton Makkah,  5 nights', time: '2 min ago' }]"
  size="md"
 />

<UiNotificationBell
  :items="[{ id: 1, title: 'Booking confirmed', message: 'Hilton Makkah,  5 nights', time: '2 min ago' }]"
  size="lg"
 />

<UiNotificationBell
  :items="[{ id: 1, title: 'Booking confirmed', message: 'Hilton Makkah,  5 nights', time: '2 min ago' }]"
  size="xl"
 />

API reference

Bell icon button with an unread counter and a dropdown list of notifications.

Props

PropType and valuesDefaultDescription

items{ id: string | number; title: string; message?: string; time?: string; read?: boolean }[]'[]'Notifications. Items without read: true count as unread and show a dot.

sizexssmmdlgxl'md'Bell button size.

Events

Vue: @name. React: onName.

readCalled with the item id when an unread item is clicked.

markAllReadCalled when "Mark all read" is clicked (shown while something is unread).

selectCalled with the item when any item is clicked.

Notes

If you handle read or markAllRead the component is controlled: it trusts only the read flags in items, so update them in your state. Without these handlers it marks items read internally.
The dropdown opens and closes internally, and closes on outside click or Escape.