Notification Center

The Notification Center component displays notifications with customizable behavior and polling capabilities.

Usage & Examples

Default

Notifications

  • You have a new follower.08:08 PM
  • Profile updated successfully.08:08 PM
  • Storage space running low.08:08 PM
  • Failed to load image.08:08 PM
default.tsx

<NotificationCenter
  notifications={mockNotifications}
  setNotifications={() => {}}
  onRemove={() => {}}
  onClearAll={() => {}}
/>

Props API

37 props
Columns
Notification Center props API
Default
Description
aria-describedbystringNoaria—Optional ID of an element that describes the notification center.
aria-labelstringNoaria"Notification center"Accessible label for the notification center region.
aria-labelledbystringNoaria—Optional ID of an external element that labels the notification center.
bodyClassNamestringNoprops—Additional class names for the live-region/body section.
classNamestringNostyling—Additional class names for the notification center wrapper.
clearAllAriaLabelstringNoprops"Clear all notifications"Accessible label for the clear all button.
clearAllClassNamestringNoprops—Additional class names for the clear-all button.
clearOldOnOverflowbooleanNopropstrueIf true, clears the oldest notifications when over the maximum.
closeButtonClassNamestringNoprops—Additional class names for each dismiss button.
contentClassNamestringNoprops—Additional class names for each notification content wrapper.
controlRoundingRoundingTypeNopropsconfigured default rounding (fallback: "medium")Rounding for the notification control. One of: "none" | "small" | "medium" | "large" | "full"
controlShadowShadowTypeNopropsconfigured default shadow (fallback: "light")Shadow for the notification control. One of: "none" | "light" | "medium" | "strong" | "intense"