Notification Panel
Complete notification panel component with header, scrollable notification list, loading states, empty states using EmptyState component, and optional footer links for activity feeds and notification centers
Basic Usage
Complete Notification Panel
Notifications
Sagittis porttitor fermentum
Amet elementum eget mi donec enim dolor scelerisque.
Adipiscing aenean a
Massa felis non feugiat gravida amet elit.
Et sed condimentum
Parturient eu aliquet dignissim odio.
Sit tellus proin
Pharetra et non proin id diam nisl eu nunc sed.
Mi feugiat ornare
Fermentum cras tortor ut lorem nisl pharetra neque ullamcorper.
A complete notification panel with header, scrollable content, and interactive notifications.
With Header Link
Notifications
Sagittis porttitor fermentum
Amet elementum eget mi donec enim dolor scelerisque.
Adipiscing aenean a
Massa felis non feugiat gravida amet elit.
Et sed condimentum
Parturient eu aliquet dignissim odio.
Sit tellus proin
Pharetra et non proin id diam nisl eu nunc sed.
Mi feugiat ornare
Fermentum cras tortor ut lorem nisl pharetra neque ullamcorper.
Panel with header action link for bulk operations.
Real-World Usage
Notification Panel in Popover
Real-world example showing NotificationPanel inside a Popover with a notification bell trigger button, unread count badge, and interactive behaviors.
Advanced Features
With Footer Links
Notifications
Sagittis porttitor fermentum
Amet elementum eget mi donec enim dolor scelerisque.
Adipiscing aenean a
Massa felis non feugiat gravida amet elit.
Et sed condimentum
Parturient eu aliquet dignissim odio.
Sit tellus proin
Pharetra et non proin id diam nisl eu nunc sed.
Mi feugiat ornare
Fermentum cras tortor ut lorem nisl pharetra neque ullamcorper.
Panel with footer navigation links for additional actions.
Custom Height
Notifications
Sagittis porttitor fermentum
Amet elementum eget mi donec enim dolor scelerisque.
Adipiscing aenean a
Massa felis non feugiat gravida amet elit.
Et sed condimentum
Parturient eu aliquet dignissim odio.
Sit tellus proin
Pharetra et non proin id diam nisl eu nunc sed.
Mi feugiat ornare
Fermentum cras tortor ut lorem nisl pharetra neque ullamcorper.
Panel with constrained height showing scrollable content.
States
Loading State
Notifications
Loading state with skeleton animation while fetching notifications.
Basic Empty State (Built-in)
Notifications
No notifications to display
Basic built-in empty state for simple use cases where minimal styling is sufficient.