notification-feed Component

Notification Feed System

A comprehensive notification system with support for different notification types, states, and interactive features like mark as read, dismiss, and action buttons.

Complete Notification Feed

Preview Code
Copy
Notifications 3
Mark all as read
All
Unread
Messages
Files
Sarah Chen
Sarah Chen sent you a message 2 min ago
Hey! Just wanted to follow up on our discussion about the new design system implementation...
Direct Message
James Brown shared a file with you 8 min ago
Here's the updated project documentation
Project_Documentation_v2.pdf
2.4 MB
Security Alert 1 hour ago
We noticed a new sign-in to your account from Chrome on Windows
Deployment Successful 2 hours ago
Your application has been successfully deployed to production
Version 2.1.0 Environment: Production
Manage Notifications

Compact Notification Feed

Preview Code
Copy
Recent Activity 2
Alex
Alex Johnson mentioned you in a comment 5m
Emma
Emma Wilson uploaded 3 files 12m
Task completed successfully 1h

Empty State

Preview Code
Copy
Notifications
No notifications
You're all caught up!

Notification Types & Variations

Message Notifications

Preview Code
Copy
User
John Doe sent you a message 5 min ago
Hey, are we still on for the meeting tomorrow?
User
Jane Smith mentioned you in a comment Just now
@you Great work on the latest feature!

File Notifications

Preview Code
Copy
Mike Johnson shared 3 files 2 hours ago
Design_Assets.zip
24.5 MB

Alert Notifications with Actions

Preview Code
Copy
Security Alert 10 min ago
New login detected from iPhone 14 Pro in San Francisco, CA
System Update Available 1 day ago
Version 2.5.0 is ready to install

Success Notifications

Preview Code
Copy
Export Complete Just now
Your data has been exported successfully
Report_2024.csv (2.3 MB)
Deployment Successful 15 min ago
Production deployment completed without errors
v2.1.0 3 services updated Duration: 2m 34s

Dismissible Notifications

Preview Code
Copy
User
Team Announcement 30 min ago
All-hands meeting scheduled for Friday at 2 PM
Reminder 2 hours ago
Your subscription will expire in 7 days

JavaScript API & Features

JavaScript API

The notification feed component includes a comprehensive JavaScript API for dynamic interactions.

// Initialize notification feed
const feed = new NotificationFeed(document.querySelector('.notification-feed'));

// Add new notification
feed.addNotification({
    type: 'message',        // message | file | alert | success
    unread: true,          // Show unread indicator
    dismissible: true,     // Allow dismissal
    avatar: 'https://i.pravatar.cc/150?u=user',
    title: 'John Doe sent you a message',
    description: 'Hello, how are you?',
    timestamp: 'Just now',
    status: 'online',      // online | offline
    file: {                // For file notifications
        name: 'document.pdf',
        size: '2.3 MB'
    },
    actions: [{            // For actionable notifications
        label: 'Approve',
        action: 'approve',
        type: 'primary'    // primary | secondary
    }],
    meta: 'Additional metadata'
});

// Listen to events
feed.element.addEventListener('notification:read', (e) => {
    console.log('Notification marked as read:', e.detail.item);
});

feed.element.addEventListener('notification:dismissed', (e) => {
    console.log('Notification dismissed');
});

feed.element.addEventListener('notification:action', (e) => {
    console.log('Action clicked:', e.detail.action);
});

feed.element.addEventListener('notification:allRead', () => {
    console.log('All notifications marked as read');
});

// Programmatic methods
feed.markAsRead(notificationElement);      // Mark specific notification as read
feed.markAllAsRead();                      // Mark all as read
feed.dismissNotification(notificationElement); // Remove notification
feed.filterNotifications('unread');        // Filter by type/state

Key Features

  • Multiple Notification Types: Message, file, alert, and success notifications with unique styling
  • Read/Unread States: Visual indicators with automatic badge count updates
  • Dismissible Notifications: Smooth animations with hover-revealed dismiss buttons
  • Tab Navigation: Filter notifications by type or read status
  • Action Buttons: Interactive notifications with customizable actions
  • File Previews: Dedicated file display with name and size information
  • Status Indicators: Online/offline status badges for user avatars
  • Batch Operations: Mark all notifications as read at once
  • Empty State: Clean placeholder when no notifications exist
  • Event System: Custom events for seamless integration with your application
  • Compact Mode: Space-efficient layout for constrained UI areas
  • Real-time Updates: Dynamic addition of new notifications with animations