Notifications

Features

• Header bell button with an unread count and aria-expanded state
• Floating dropdown panel with scale + fade open/close animation
• All / Unread segmented filter control
• Keyboard arrow/Home/End navigation between filters keeps selection and focus synchronized
• Avatar activity feed with real WebP portraits over accent discs; the colored initial disc (violet, amber, green, rose, blue, orange) shows through as an automatic fallback if a photo fails to load, and stays as-is for non-person generation events
• Semantic corner badges per event type: comment (message), generated (sparkles), invite (user-plus), like (heart) — official Tabler glyphs
• Bold action lines with emphasized target names and clamped comment bodies
• Generated-result metadata lines (style + prompt)
• Inline invite actions: Decline (light) and Accept (near-black)
• Green unread dots; click a row to mark it read; trigger dot clears when none remain
• Staggered entrance animation on open (transform + opacity only)
• Light and dark roles are supplied by the host browser
• Keyboard accessible: Escape to close, focus-visible rings, reduced-motion support
• Responsive: full-width panel on mobile (< 480px)

Accessibility

Trigger button

aria-haspopup="true", aria-expanded toggled, aria-label

Panel

role="region" with aria-label="Notifications"

Filter control

role="tablist" with role="tab" + aria-selected buttons, each aria-labelled

Unread dot

role="img" with aria-label="Unread"

Invite actions

Each button carries a descriptive aria-label

Live region

Visually-hidden role="status" aria-live="polite" region announces invite outcomes and read-state changes

Empty state

role="status" on the "all caught up" message

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables animations

Escape key

Closes panel and returns focus to trigger

Customise it with AI

Open Notifications in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the notification is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.