BundyUI

Feedback

PopoverBadgeAvatarButton

NotificationCenter

A bell trigger opening a `Popover` panel listing notifications — unread markers, a mark-all-as-read action, and an optional per-entry dismiss button — for a persistent inbox rather than `Toast`'s transient popups.

vue
<UiNotificationCenter />

Options

One block per prop — what it does, and what it looks like set.

Items

items is the list of notifications, newest first. Each unread entry shows a Badge dot at the end of its row, and the trigger picks up a Badge with the unread count.

2

Title

title replaces the panel's default 'Notifications' heading.

2

Open

Bind it with v-model:open when something outside the panel has to open or close it.

2

Default open

defaultOpen starts the panel open when it manages its own state — reasonable for drawing attention on first load.

2

Content

content positions the panel relative to its trigger — side, alignment and offset.

2

Badge

badge is on by default. Turn it off when the trigger already shows unread state some other way.

2

Badge color

badgeColor colors the unread count on the trigger and the unread dot on each entry together — error by default, so unread notifications read as something to deal with. Pass a calmer color for an inbox that is informational.

2
2

Dismissible

dismissible shows a per-entry close button on hover, emitting dismiss instead of select.

2

Date format

dateFormat controls how each entry's date is rendered. relative (the default) produces '3 hours ago', computed at render time.

2

Locale

locale sets which locale formats each entry's date. Defaults to the runtime's.

en-US
2
de-DE
2
ja-JP
2

Empty text

Shown in place of the list when items is empty.

Examples

The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.

Custom trigger

The default slot replaces the bell button entirely — the unread Badge still wraps whatever you put there.

2

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
items
NotificationItem[]
[]
The notifications to display, newest first. The component doesn't sort them.
title
string
'Notifications'
The panel's heading.
open
boolean
—
Controls whether the panel is open for external `v-model:open` usage.
defaultOpen
boolean
false
Initial open state when uncontrolled.
content
NotificationCenterContentProps
{ side: 'bottom', align: 'end', sideOffset: 8 }
Positioning options for the panel relative to its trigger.
badge
boolean
true
Shows an unread-count `Badge` on the trigger.
badgeColor
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'error'
Colors the unread-count `Badge` on the trigger and the unread dot on each entry in the panel — one color, so the count and the entries it counts read as the same thing.
dismissible
boolean
true
Shows a per-entry dismiss button on hover.
dateFormat
"date" | "datetime" | "time" | "relative"
'relative'
How each entry's `date` is rendered. `relative` produces "3 hours ago" — computed at render time, so it doesn't tick on its own.
locale
string
—
Locale used to format dates. Defaults to the runtime's.
emptyText
string
'No notifications'
Text shown in place of the list when `items` is empty.

Slots

Slot
default
Receives `{ open, unreadCount }`.
footer
Receives `{ close }`.

Emits

Event
Payload
Description
update:open
[value: boolean]
—
select
[item: NotificationItem]
—
read
[item: NotificationItem]
—
mark-all-read
[]
—
dismiss
[item: NotificationItem]
—

Types

ts
type NotificationColor = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";
ts
type DateFormat = "date" | "datetime" | "time" | "relative";
ts
interface NotificationItem {
    /**
     * Unique value identifying this entry, used as its render key.
     */
    id: string | number;

    /**
     * The entry's heading.
     */
    title?: string;

    /**
     * Secondary text under the title, clamped to two lines.
     */
    description?: string;

    /**
     * Name of the icon rendered as this entry's marker.
     */
    icon?: string;

    /**
     * Renders an avatar as this entry's marker instead of an icon — for activity from a person
     * rather than the system. Takes precedence over `icon`.
     */
    avatar?: { src?: string; alt?: string; firstName?: string; lastName?: string };

    /**
     * Colors the icon, the same way `Toast` colors its own. Ignored on an `avatar` marker.
     * @defaultValue 'neutral'
     */
    color?: NotificationColor;

    /**
     * When the entry happened. A `Date` or a timestamp number is formatted per `dateFormat`; a
     * string is displayed verbatim unless it's ISO-8601, which is formatted like the other two.
     */
    date?: string | number | Date;

    /**
     * Whether the entry has been read. Unread entries show a `Badge` dot at the end of the row.
     * @defaultValue false
     */
    read?: boolean;

    /**
     * Turns the entry into a link to this route or URL.
     */
    to?: string;

    /**
     * Called when the entry is clicked, in addition to any `to` navigation.
     */
    onClick?: (e: Event) => void;
}
ts
interface NotificationCenterContentProps {
    side?: "top" | "right" | "bottom" | "left";
    align?: "start" | "center" | "end";
    sideOffset?: number;
}