Dark mode alert

A compact alert surface with a strong accent rail, tuned for dark cards and tokenized borders.

Billing address updated

We saved your changes. You can review invoices any time from settings.

Widely Supported

colora11yno-js

Quick implementation

.dma-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid oklch(0.42 0.12 250 / 0.45);
  background: var(--card);
  border-inline-start: 4px solid oklch(0.72 0.14 250);
}
.dma-title { margin: 0; font-size: 0.95rem; }
.dma-text { margin: 0; color: var(--muted); font-size: 0.88rem; }

Prompt this to your LLM

Role, constraints, variants, and edge cases.

You are a UI engineer building dark-theme alerts.

Goal: A reusable inline alert with a left accent rail, title + body, and optional dismiss control.

Technical constraints:
- Use oklch() for the accent rail and icon tint; use var(--card) and var(--card-border) for surfaces.
- Mark live regions with role="status" or role="alert" appropriately; never remove focus outlines.
- Dismiss button must be a real <button> with :focus-visible styles.
- Support stacked alerts with consistent spacing; no absolute positioning for the rail.

Framework variant A: vanilla HTML + CSS.
Framework variant B: React — props: variant (info|warn|error), title, children, onDismiss optional.

Edge cases:
- Long text should wrap without overflow:hidden on the message column.
- High contrast mode: borders must remain visible (avoid ultra-low alpha on strokes).
- prefers-reduced-motion: skip shimmer or entrance animations if you add any.

Return HTML + CSS.

Why this matters in 2026

Alerts are high-frequency UI. Shipping them as a token-aware, dark-first pattern keeps dashboards and settings flows visually consistent without bolting on a component library.

The logic

The left rail is a single border-inline-start in oklch() so you can swap hue per severity while keeping the same layout grid. The grid keeps the icon, copy, and dismiss aligned without fragile negative margins.

Accessibility & performance

Use role="status" for non-critical updates and role="alert" only when interruption is intended. Performance is trivial: no scripts, no filters—just paint-friendly borders and text.