# Notifications

> A notifications dropdown panel triggered from a header bolt button, with an All/Unread segmented filter, an avatar-driven activity feed, semantic corner badges, accent unread markers, inline invite actions, and a dark mode toggle — fully token-driven and design-system agnostic.

- Category: Notification
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: dropdown
- Page: https://builder.atheros.ai/components/notifications
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_notifications/preview-dcae587444d6.webp

## 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-label`led
- **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

## Keyboard shortcuts

- `Escape` — Close panel, return focus to trigger

## Common questions

**Which frameworks is Notifications available in?**

Notifications ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Notifications free?**

Notifications is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Notifications support dark mode?**

Yes. Notifications ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Notifications live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/notifications

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt