Notification

Presentational notification center pieces — a bell with an unread badge, a notification row, and the dropdown panel chrome. The host owns data.

Presentational building blocks for a notification center: a NotificationBell (an icon trigger with an unread-count badge), a NotificationItem (one row — type glyph, title, body, time, with an optional link and hover-dismiss), and a NotificationPanel (the dropdown chrome — header, scrollable list with loading / empty states, and a footer slot).

These are presentation only: the host owns data fetching, auth, polling, mark-as-read, and the open/close state. Copy is passed in (no bundled i18n) and links go through the adapter Link.

Import

tsx

1import { NotificationBell, NotificationItem, NotificationPanel } from "@yuhuanowo/yunui/patterns";

Example

The bell's count drives the badge; the panel renders NotificationItem children with loading / empty states; each item can be a link (adapter Link) and/or carry a hover dismiss button.

Notification center

Notifications

2 unread

View all

Composition

The pieces are deliberately separate so the host owns the dropdown:

NotificationBell — the trigger. Wire onClick to your open state; count shows the unread badge (max caps it, e.g. 99+).
NotificationPanel — wrap it in your own relative / absolutely-positioned container. Drive loading / empty from your fetch state; put a "view all" Link in footer.
NotificationItem — render one per notification. The host maps a notification type to the icon + iconClassName tint; href makes the row a link, dismissible + onDismiss adds the hover trash button.

Props

NotificationBell

Prop	Type	Default	Description
className	string	—
count	number	0	Unread count; the badge is hidden when 0 / undefined.
icon	ReactNode	—	Override the bell glyph.
label	string	—	Accessible label for the trigger.
max	number	99	Cap the displayed number — above it shows `{max}+`.
onClick	(() => void)	—

NotificationItem

Prop	Type	Default	Description
body	ReactNode	—
className	string	—
dismissible	boolean	—	Show a hover dismiss (trash) button.
dismissLabel	string	—
href	string	—	Optional target — when set the row is an adapter `<Link>`.
icon	ReactNode	—	Type glyph — the host renders it (e.g. an icon for the notification type).
iconClassName	string	—	Tint classes for the icon square (bg + text color).
onDismiss	(() => void)	—
onSelect	(() => void)	—	Fires on row activation (also use to close the panel).
time	ReactNode	—	Host-formatted relative time (e.g. "2h").
title*	ReactNode	—
unread	boolean	—	Unread rows read bolder; read rows are muted.

NotificationPanel

Prop	Type	Default	Description
children	ReactNode	—	The notification rows.
className	string	—
empty	boolean	—	When true (and not loading) the empty state replaces the children.
emptyLabel	ReactNode	—	@deprecated Use labels.empty. Retained for 0.2.17 compatibility.
footer	ReactNode	—	Footer slot — typically a centered "view all" adapter Link.
labels	{ unread?: ReactNode; loading?: ReactNode; empty?: ReactNode; }	—	Every string the panel renders besides `title`. See CONTRIBUTING.md.
loading	boolean	—
loadingLabel	ReactNode	—	@deprecated Use labels.loading. Retained for 0.2.17 compatibility.
title*	ReactNode	—
unreadCount	number	0	Unread count shown in the header; hidden when 0.
unreadLabel	ReactNode	—	@deprecated Use labels.unread. Retained for 0.2.17 compatibility.