InboxPanel
Feedback

InboxPanel

Display a notification inbox with read, dismissal, and empty states.

InboxPanel lists notifications with read and dismissal actions. The application supplies the notification records and handles changes.

Import

TSX
import { InboxPanel } from "@solarius/onset";

Props

InboxPanelProps props
PropTypeDefaultDescription
itemsNotificationItem[]—Notification data array.
titleReactNode"Notifications"Panel title.
onRead(id: string) => void—Mark one as read.
onDismiss(id: string) => void—Dismiss one.
onReadAll() => void—Displays a Mark all as read button while unread items exist.
onItemClick(item: NotificationItem) => void—Click handler for a row.
filterablebooleantrueAdds All / Unread filter row under the header. Ignored when views is set.
viewsInboxView[]—Replaces All and Unread views. The application filters the supplied items.
activeViewstring—Controlled selected view key.
defaultActiveViewstring—Initial selected key for an uncontrolled custom view row.
onViewChange(key: string) => void—A view was picked.
searchableboolean—Adds a search band between the header and the views.
searchValuestring—Controlled search text.
onSearchChange(value: string) => void—Delegates search filtering to the application. When omitted, the field filters items locally.
searchPlaceholderstring"Search notifications"Placeholder for the search field.
unreadCountnumber—Header badge total. Defaults to the unread rows in items, which undercounts a paginated list.
headerActionsReactNode—Right-aligned header content. Pointer presses in this area do not start dragging.
footerReactNode—Footer content below the scrolling list.
loadingboolean—Swaps the list for placeholder rows while the first page loads.
groupedboolean—Section rows under their category.
emptyMessageReactNode"You're all caught up."Message when the list is empty.
maxHeightnumber380List max height in px.
widthnumber | string320pxPanel width.

Example

InboxPanel

Related APIs