Home / Snippets / UI Components /

Notification list

Inbox of system events: severity tint, one-line title, meta line, optional dismiss.

Deploy #482 succeeded

main · 2 min ago · edge cache warmed

API rate limit at 82%

key ending …4f9a · rolling 5 min window

Webhook delivery failing

endpoint returned 500 · last retry 30s ago

Widely Supported

uino-js

Quick implementation

.nl-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius);
  background: var(--subtle);
}
.nl-item--crit { border: 1px solid oklch(0.6 0.2 25 / 0.45); }

Prompt this to your LLM

Three severities, real dismiss buttons.

Create a notification stack.

Use .notification-list-demo and .notification-list-card.
Each row: article.nl-item with modifier nl-item--info|--warn|--crit, dot, title, meta, dismiss × button.
role="list" on container, listitem on articles.

Return HTML + CSS.

Why this matters in 2026

Ops consoles mix benign and critical signals; color plus text keeps notifications legible for color-blind viewers.

The logic

Borders carry severity; dots reinforce without relying on color alone when paired with copy.

Accessibility & performance

Each article has a real heading; wire dismiss to remove nodes and move focus in your framework.