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-describedbystringNoariaOptional ID of an element that describes the notification center.
aria-labelstringNoaria"Notification center"Accessible label for the notification center region.
aria-labelledbystringNoariaOptional ID of an external element that labels the notification center.
bodyClassNamestringNopropsAdditional class names for the live-region/body section.
classNamestringNostylingAdditional class names for the notification center wrapper.
clearAllAriaLabelstringNoprops"Clear all notifications"Accessible label for the clear all button.
clearAllClassNamestringNopropsAdditional class names for the clear-all button.
clearOldOnOverflowbooleanNopropstrueIf true, clears the oldest notifications when over the maximum.
closeButtonClassNamestringNopropsAdditional class names for each dismiss button.
contentClassNamestringNopropsAdditional 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"