Notification

molecules

Notification item — avatar/icon + title + body + timestamp + unread dot. Used in notification dropdown and feed.

ARIA Role: article

Demo

Saved successfully

Your changes are live.

Connection failed

Check your network.

Props

Prop	Type	Required	Default	Description
`id`	`string`	Yes	`—`
`title`	`string`	Yes	`—`
`timestamp`	`string`	Yes	`—`	ISO 8601

TypeScript Interface

interface NotificationProps {
  id: string;
  title: string;
  body?: string;
  icon?: React.ReactNode;
  timestamp: string;
  unread?: boolean;
  href?: string;
  onDismiss?: (id: string) => void;
}

Assertions (NASA Rule 5)

[type]timestamp must be ISO 8601 (NASA Rule 7)(NASA Rule 7)
[aria]Unread items have role='status' with sr-only 'unread' label(WCAG 1.3.1)

Usage

Import

import { Notification } from '@epasslive/design-system'

Basic

<Notification />

With Variants

<Notification variant="primary" size="md" />