Notification Center

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

Usage

Default

Notifications

You have a new follower.05:22 PM
Profile updated successfully.05:22 PM
Storage space running low.05:22 PM
Failed to load image.05:22 PM


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

Props

Data table
	Type	Description
aria-describedby	string	Optional ID of an element that describes the notification center.
aria-label	string	Accessible label for the notification center region.
aria-labelledby	string	Optional ID of an external element that labels the notification center.
clearAllAriaLabel	string	Accessible label for the clear all button.
clearOldOnOverflow	boolean	If true, clears the oldest notifications when over the maximum.
controlRounding	RoundingType	Rounding for the notification control. One of: "none" \| "small" \| "medium" \| "large" \| "full"
controlShadow	ShadowType	Shadow for the notification control. One of: "none" \| "light" \| "medium" \| "strong" \| "intense"
data-testid	string	Optional test ID for testing frameworks.
dismissButtonLabelPrefix	string	Prefix used to build dismiss button labels.
emptyMessage	string	Accessible text announced when there are no notifications.
fetchNotifications	(() => Promise<Notification[]>)	Optional callback function to fetch more notifications.
list-aria-label	string	Accessible label for the notifications list when needed.
liveRegionAtomic	boolean	Whether the live region should announce the entire region or only changed content.
liveRegionPoliteness	"off" \| "polite" \| "assertive"	Live region politeness level for notification updates.
liveRegionRelevant	"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"	Which kinds of changes should be announced by assistive technology.
maxNotifications	number	Maximum number of notifications to display.
notificationRounding	RoundingType	Rounding of the notification. One of: "none" \| "small" \| "medium" \| "large" \| "full"
notifications	Notification[]	Array of notifications to display.
notificationShadow	ShadowType	Shadow of the notification. One of: "none" \| "light" \| "medium" \| "strong" \| "intense"
onClearAll	(() => void)	Optional callback function to clear all notifications.
onRemove	(id: string) => void	Callback function to remove a notification by its ID.
pollInterval	number	Optional interval (in milliseconds) at which to fetch more notifications.
setNotifications	React.Dispatch<React.SetStateAction<Notification[]>>	Callback function to set the notifications array.
showClearAll	boolean	Whether to show a "Clear All" button if notifications are present.