NotificationItem

Displays a single notification with icon, title, message, timestamp, and optional actions. Supports selection mode for bulk operations.

Import​

Notification components are available via a separate entry point to make @classic-homes/notifications an optional dependency.

<script>
  import { NotificationItem } from '@classic-homes/theme-svelte/notifications';
</script>

Note: Using notification components requires @classic-homes/notifications to be installed.

Basic Usage​

<script>
  import type { Notification } from '@classic-homes/notifications/core';

  const notification: Notification = {
    id: '1',
    userId: 'user-1',
    type: 'info',
    category: 'general',
    title: 'Welcome!',
    message: 'Thanks for signing up.',
    priority: 'normal',
    read: false,
    dismissed: false,
    createdAt: new Date().toISOString(),
  };
</script>

<NotificationItem {notification} />

Props​

Prop	Type	Default	Description
notification	Notification	required	The notification object to display
isSelected	boolean	false	Whether this notification is selected
selectable	boolean	false	Whether selection mode is enabled
onToggleSelect	(id: string, selected: boolean) => void	-	Callback when selection state changes
onClick	(notification: Notification) => void	-	Callback when notification is clicked
class	string	-	Additional CSS classes

Notification Object​

The Notification type from @classic-homes/notifications/core:

interface Notification {
  id: string;
  userId: string;
  type: 'security' | 'system' | 'feature' | 'update' | 'alert' | 'info';
  category: string;
  title: string;
  message: string;
  priority: 'urgent' | 'high' | 'normal' | 'low';
  read: boolean;
  dismissed: boolean;
  createdAt: string;
  readAt?: string;
  actionUrl?: string;
  actionLabel?: string;
}

Visual States​

Unread​

Unread notifications have a light blue background and blue border:

<NotificationItem notification={{ ...notification, read: false }} />

Read​

Read notifications have a neutral card background:

<NotificationItem notification={{ ...notification, read: true }} />

Priority Badges​

Non-normal priorities display a badge:

<!-- Shows "urgent" badge -->
<NotificationItem notification={{ ...notification, priority: 'urgent' }} />

<!-- Shows "high" badge -->
<NotificationItem notification={{ ...notification, priority: 'high' }} />

Selection Mode​

Enable selection for bulk operations:

<script>
  let selectedIds = $state(new Set<string>());

  function handleToggleSelect(id: string, selected: boolean) {
    const newSet = new Set(selectedIds);
    if (selected) {
      newSet.add(id);
    } else {
      newSet.delete(id);
    }
    selectedIds = newSet;
  }
</script>

<NotificationItem
  {notification}
  selectable={true}
  isSelected={selectedIds.has(notification.id)}
  onToggleSelect={handleToggleSelect}
/>

Click Handler​

Handle clicks to show notification details:

<script>
  let selectedNotification = $state<Notification | null>(null);
  let dialogOpen = $state(false);

  function handleClick(notification: Notification) {
    selectedNotification = notification;
    dialogOpen = true;
  }
</script>

<NotificationItem {notification} onClick={handleClick} />

Action Links​

Notifications with actionUrl and actionLabel display a clickable link:

<NotificationItem
  notification={{
    ...notification,
    actionUrl: '/settings/security',
    actionLabel: 'Review Activity',
  }}
/>

Accessibility​

The component includes accessibility features:

• Full keyboard navigation (Enter, Space to activate)
• Proper ARIA roles when clickable
• Focus visible states
• Checkbox for selection mode with proper labeling

Examples​

In a List​

{#each notifications as notification (notification.id)}
  <NotificationItem
    {notification}
    selectable={true}
    isSelected={selectedIds.has(notification.id)}
    onToggleSelect={handleToggleSelect}
    onClick={handleNotificationClick}
  />
{/each}

Related Components​

• NotificationList - Container for notification items
• NotificationDialog - Show notification details
• NotificationBadge - Unread count indicator