Notification Item
Flexible notification component supporting various states, user avatars, badges, and interactive elements for activity feeds and alert systems
Navigation vs Interaction
Navigation to Notification Source
Navigation: Uses Next.js Link to navigate to notification sources. Click to navigate to feedback or report.
Interactive Custom Actions
Team meeting reminder
Daily standup starts in 15 minutes
System maintenance
Scheduled downtime tonight at 2 AM
Interaction: Uses onClick for custom actions like opening modals, marking as read, or triggering workflows.
External Links
External Navigation: Links to external resources with proper target and rel attributes.
Basic Notification States
Read vs Unread Notifications
Active notification
This is sample notification
Active notification
This is sample notification
Unread notifications have blue background and indicator dot. Read notifications have standard styling.
With Avatar
Active notification
This is sample notification from John
Active notification
This is sample notification from Jane
Notifications can display user avatars with images or initials fallback.
Interactive Elements
Action Buttons
Notification with close button
Click the X to dismiss
Notification with number badge
Shows notification count and close button
Clickable notification
Click anywhere to open
Notifications support close buttons and general click handlers.
Badges and Numbers
Notification with count
Shows notification count badge
Notification with badge
Has additional badge information
Complex notification
Multiple indicators and close button
Support for count badges, colored labels, and close functionality.