Notifications by day, filtered by unread or type, each with its action right there: approve, accept, retry or reply; undo a dismissal and pick what's emailed.
When to use
- Notifications by day, filtered by unread or type, each with its action right there.
- Apps where notifications ask for something: approve, accept, retry.
When not to use
- Messages people reply to: Inbox.
- A brief confirmation of what just happened: a Toast.
Usage
Notifications with your own data: every prop has the sample as its default, so pass only what you have.
import { NotificationsCenter } from "@/components/dashral/blocks/notifications-center"
<NotificationsCenter
items={notifications}
onRead={(ids) => api.notifications.read(ids)}
onReadAll={() => api.notifications.readAll()}
onDismiss={(id) => api.notifications.dismiss(id)}
onAction={(id, action) => api.notifications.act(id, action)}
/>API reference
NotificationsCenter
A notifications page: grouped by day, filtered by unread or by type, each with what it needs done right there — approve or deny access, accept an invite, retry a failed payment, reply to a mention. Mark one read or unread, dismiss it (with undo), mark all read, and pick which kinds come in the app or by email. Your notifications come in as items (a new list replaces what's shown), and every change goes to your handlers; one that throws is undone, with its message.
| Prop | Type | Default |
|---|---|---|
title | React.ReactNode | "Notifications" |
items | NotificationItem[] | sample |
email | stringWho the preferences email, in their dialog. | sample |
preferences | NotificationPreferencesWhat comes in the app and by email, at first. | sample |
onRead | (id: NotificationItem["id"], read: boolean) => Promise<void> | void | — |
onReadAll | () => Promise<void> | void | — |
onDismiss | (id: NotificationItem["id"]) => Promise<void> | void | — |
onAction | (item: NotificationItem, action: NotificationAction, reply?: string) => Promise<void> | voidA notification's button, with the reply's text for "reply"; what it says once done stays under it. | — |
onPreferencesChange | (preferences: NotificationPreferences) => Promise<void> | void | — |
type NotificationKind
= "mention" | "comment" | "access" | "invite" | "payment" | "order" | "report" | "customers" | "system"type NotificationCategory
= "conversations" | "requests" | "billing" | "updates"type NotificationAction
What a notification's buttons do: approve or deny access, accept or decline an invite, retry a payment, reply to a mention.
= "approve" | "deny" | "accept" | "decline" | "retry" | "reply"type NotificationPreferences
= Record<NotificationCategory, { app: boolean; email: boolean }>type NotificationItem
| Prop | Type | Default |
|---|---|---|
id | number | string | — |
kind | Kind | — |
actor | stringWho did it; none for the app's own news. | — |
action | stringWhat happened, after the actor's name. | — |
target | stringWhat it happened to, in bold after the action. | — |
detail | stringA quote or a detail under the line. | — |
when | stringThe day it's grouped under, e.g. "Today"; groups follow the order they first appear in. | — |
time | string | — |
read | boolean | — |
done | stringOnce acted on (approved, declined, replied…), what was done. | — |