[ [UI.41] Components ] Notification List

Notification List

> A scrollable list of notifications with read/unread states, type indicators, and dismiss functionality.

Import

[ [0x5B] IMPORT ]

1import { NotificationList, Notification } from "@/components/ui/notification-list"

Preview

[ [0x00] NOTIFICATION LIST ]

New comment on your post

Sarah commented: 'Great work on the latest update!'

2 minutes ago

Payment received

You received $299.00 from Acme Corp.

1 hour ago

Storage limit warning

You've used 85% of your storage quota.

3 hours ago

Failed to sync

Could not sync your files. Please try again.

Yesterday

1const [notifications, setNotifications] = useState<Notification[]>([
2  {
3    id: "1",
4    title: "New comment on your post",
5    description: "Sarah commented: 'Great work!'",
6    time: "2 minutes ago",
7    read: false,
8    type: "info",
9  },
10]);
11
12<NotificationList
13  notifications={notifications}
14  onMarkAsRead={(id) => {
15    setNotifications(prev =>
16      prev.map(n => n.id === id ? { ...n, read: true } : n)
17    );
18  }}
19  onDismiss={(id) => {
20    setNotifications(prev => prev.filter(n => n.id !== id));
21  }}
22/>

Variants

[ [0x00] NOTIFICATION TYPES ]

Information

This is an informational notification

Just now

Success

Operation completed successfully

1 min ago

Warning

Please review this warning

5 min ago

Error

An error occurred

10 min ago

1<NotificationList
2  notifications={[
3    {
4      id: "1",
5      title: "Information",
6      description: "This is an informational notification",
7      time: "Just now",
8      type: "info", // Shows info icon
9    },
10    {
11      id: "2",
12      title: "Success",
13      description: "Operation completed successfully",
14      time: "1 min ago",
15      type: "success", // Shows checkmark
16    },
17    {
18      id: "3",
19      title: "Warning",
20      description: "Please review this warning",
21      time: "5 min ago",
22      type: "warning", // Shows alert triangle
23    },
24    {
25      id: "4",
26      title: "Error",
27      description: "An error occurred",
28      time: "10 min ago",
29      type: "error", // Shows X icon
30    },
31  ]}
32/>

[ [0x00] LOADING STATE ]

1<NotificationList loading />

[ [0x00] ERROR STATE ]

Error loading notifications

1<NotificationList error />

[ [0x00] EMPTY STATE ]

No notifications

1<NotificationList notifications={[]} />

[ [0x00] WITHOUT DISMISS BUTTON ]

New comment on your post

Sarah commented: 'Great work on the latest update!'

2 minutes ago

Payment received

You received $299.00 from Acme Corp.

1 hour ago

1<NotificationList
2  notifications={notifications}
3  onMarkAsRead={handleMarkAsRead}
4  // No onDismiss prop - dismiss buttons hidden
5/>

[ [0x00] READ VS UNREAD ]

[UNREAD]

Unread notification

This notification has not been read

5 min ago

[READ]

Read notification

This notification has been read

1 hour ago

1// Unread notification has accent background
2{
3  id: "1",
4  title: "Unread notification",
5  description: "This notification has not been read",
6  time: "5 min ago",
7  read: false, // Highlighted background
8}
9
10// Read notification has default background
11{
12  id: "2",
13  title: "Read notification",
14  description: "This notification has been read",
15  time: "1 hour ago",
16  read: true, // Default background
17}

[ [0x00] WITHOUT DESCRIPTION ]

Simple notification

Just now

Another simple notification

2 min ago

1<NotificationList
2  notifications={[
3    {
4      id: "1",
5      title: "Simple notification",
6      time: "Just now",
7      // No description field
8    },
9  ]}
10/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
notifications	`Notification[]`	-	Array of notification objects to display
onMarkAsRead	`(id: string) => void`	-	Callback when a notification is clicked or marked as read
onDismiss	`(id: string) => void`	-	Callback when a notification is dismissed. If omitted, dismiss buttons are hidden
loading	`boolean`	`false`	Show loading skeleton placeholders
error	`boolean`	`false`	Show error state message
className	`string`	-	Additional CSS classes for the container

Accessibility

[ [0x58] A11Y ]

Each notification is a keyboard-accessible button with proper role
Enter and Space keys trigger onMarkAsRead callback
Notifications have descriptive aria-labels including read status
Dismiss buttons have aria-labels for screen readers
Unread notifications indicated with accent background for visibility
Icons have appropriate text colors for type differentiation
Hover states provide visual feedback for interactive elements
Focus states use focus-within for keyboard navigation

Preview

[ [0x00] NOTIFICATION LIST ]

New comment on your post

Sarah commented: 'Great work on the latest update!'

2 minutes ago

Payment received

You received $299.00 from Acme Corp.

1 hour ago

Storage limit warning

You've used 85% of your storage quota.

3 hours ago

Failed to sync

Could not sync your files. Please try again.

Yesterday

1const [notifications, setNotifications] = useState<Notification[]>([
2  {
3    id: "1",
4    title: "New comment on your post",
5    description: "Sarah commented: 'Great work!'",
6    time: "2 minutes ago",
7    read: false,
8    type: "info",
9  },
10]);
11
12<NotificationList
13  notifications={notifications}
14  onMarkAsRead={(id) => {
15    setNotifications(prev =>
16      prev.map(n => n.id === id ? { ...n, read: true } : n)
17    );
18  }}
19  onDismiss={(id) => {
20    setNotifications(prev => prev.filter(n => n.id !== id));
21  }}
22/>

Variants

[ [0x00] NOTIFICATION TYPES ]

Information

This is an informational notification

Just now

Success

Operation completed successfully

1 min ago

Warning

Please review this warning

5 min ago

Error

An error occurred

10 min ago

1<NotificationList
2  notifications={[
3    {
4      id: "1",
5      title: "Information",
6      description: "This is an informational notification",
7      time: "Just now",
8      type: "info", // Shows info icon
9    },
10    {
11      id: "2",
12      title: "Success",
13      description: "Operation completed successfully",
14      time: "1 min ago",
15      type: "success", // Shows checkmark
16    },
17    {
18      id: "3",
19      title: "Warning",
20      description: "Please review this warning",
21      time: "5 min ago",
22      type: "warning", // Shows alert triangle
23    },
24    {
25      id: "4",
26      title: "Error",
27      description: "An error occurred",
28      time: "10 min ago",
29      type: "error", // Shows X icon
30    },
31  ]}
32/>

[ [0x00] LOADING STATE ]

1<NotificationList loading />

[ [0x00] ERROR STATE ]

Error loading notifications

1<NotificationList error />

[ [0x00] EMPTY STATE ]

No notifications

1<NotificationList notifications={[]} />

[ [0x00] WITHOUT DISMISS BUTTON ]

New comment on your post

Sarah commented: 'Great work on the latest update!'

2 minutes ago

Payment received

You received $299.00 from Acme Corp.

1 hour ago

1<NotificationList
2  notifications={notifications}
3  onMarkAsRead={handleMarkAsRead}
4  // No onDismiss prop - dismiss buttons hidden
5/>

[ [0x00] READ VS UNREAD ]

[UNREAD]

Unread notification

This notification has not been read

5 min ago

[READ]

Read notification

This notification has been read

1 hour ago

1// Unread notification has accent background
2{
3  id: "1",
4  title: "Unread notification",
5  description: "This notification has not been read",
6  time: "5 min ago",
7  read: false, // Highlighted background
8}
9
10// Read notification has default background
11{
12  id: "2",
13  title: "Read notification",
14  description: "This notification has been read",
15  time: "1 hour ago",
16  read: true, // Default background
17}

[ [0x00] WITHOUT DESCRIPTION ]

Simple notification

Just now

Another simple notification

2 min ago

1<NotificationList
2  notifications={[
3    {
4      id: "1",
5      title: "Simple notification",
6      time: "Just now",
7      // No description field
8    },
9  ]}
10/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
notifications	`Notification[]`	-	Array of notification objects to display
onMarkAsRead	`(id: string) => void`	-	Callback when a notification is clicked or marked as read
onDismiss	`(id: string) => void`	-	Callback when a notification is dismissed. If omitted, dismiss buttons are hidden
loading	`boolean`	`false`	Show loading skeleton placeholders
error	`boolean`	`false`	Show error state message
className	`string`	-	Additional CSS classes for the container

Accessibility

[ [0x58] A11Y ]

Each notification is a keyboard-accessible button with proper role
Enter and Space keys trigger onMarkAsRead callback
Notifications have descriptive aria-labels including read status
Dismiss buttons have aria-labels for screen readers
Unread notifications indicated with accent background for visibility
Icons have appropriate text colors for type differentiation
Hover states provide visual feedback for interactive elements
Focus states use focus-within for keyboard navigation