Alert

Molecule

Inline feedback panel for contextual status messages. Replaces "Notification" — previously named Notification, now referred to as Alert throughout the system. Mirrors Figma node 140-6541 (light) + 5958-2561 (dark) 1:1. Three visual variants — Semi-filled (tinted bg + colour title), Filled (solid colour bg + white text), Border (white bg + colour border + title). Seven semantic colours: Brand · Info · Danger · Success · Warning · Notice · Alert (orange). Each alert carries a header row (icon + title + dismiss), a description body, and up to two action buttons. 70 new --alert-* tokens (35 light + 35 dark) power the cascade; a small set of CSS custom properties on the wrapper propagates colour + variant to every child.

When to use

✅ Do
  • Use for persistent, inline feedback that stays visible until the user dismisses it
  • Use for form validation summaries at the top of a form
  • Use Danger for errors, Success for confirmations, Warning for cautions, Info for neutral notices
  • Keep the title to one line — it is enforced, and longer titles truncate with an ellipsis
  • Keep the description to one or two sentences — three lines maximum, enforced by clamping
❌ Don't
  • Use for transient feedback after a user action — use Snackbar instead
  • Show more than 2 alerts on the same page simultaneously
  • Use Alert as a modal replacement — it is inline, not blocking
  • Call it "Notification" — the system-wide name is Alert
  • Paste long or AI-generated copy without checking it fits — the title cuts at one line and the body at three, and the hidden text is lost to the user

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

An Alert is structured as a header row (icon + title + dismiss) followed by a description body and optional action buttons.

Alert title
Description text here.
  1. 1Wrapper — .alert. Add colour modifier + optional variant modifier.
  2. 2Header row — .alert-header. Centre-aligned flex row with icon, title, and close button.
  3. 3Icon — .alert-icon. 20px, colour driven by --_accent private variable.
  4. 4Title — .alert-title. Body 1 Semi Bold.
  5. 5Close button — .alert-close. 24px hit target, 16px icon.
  6. 6Body — .alert-body. Body 2 Regular description text.
  7. 7Actions — .alert-actions. Optional flex row of 1–2 buttons.

Default

A bare .alert — Brand colour, Semi-filled variant (the defaults). Add a colour class (.alert-info etc.) and an optional variant class (.alert-filled / .alert-border) to override.

Variants

Three variants shown on the Info colour. Semi-filled (default — no variant class) uses a tinted background with a coloured title/icon. Filled (.alert-filled) uses the solid accent as background with white text throughout; the primary action button inverts to white + accent text. Border (.alert-border) sits on the page bg with a coloured hairline. Combine with any colour class: class="alert alert-info alert-filled".

Semi-filled (default)
Filled
Border

Colors

Seven semantic colours — all shown in Semi-filled. Toggle the theme switch in the global header to see every colour under dark tokens; backgrounds lighten, accents brighten slightly. The "Alert" colour class (.alert-alert) is the orange semantic — same naming convention used across the system (--color-alert-*).

Full matrix

7 colours × 3 variants = 21 alert surfaces. Each cell is the canonical alert with icon, title, body, dismiss, and two action buttons. Toggle dark mode to see the full dark-mode coverage — Brand inverts (white bg in filled dark), coloured variants use brighter tones.

Accessibility

Attribute / BehaviourValueNotes
Role — error/criticalrole="alert"Use for Danger alerts — announces immediately to screen readers
Role — informationalrole="status"Use for Info/Success/Warning — announces politely without interrupting
Dismiss buttonaria-label="Dismiss alert"The × icon alone has no accessible name
Action buttonsStandard <button>Use descriptive labels — "Retry", "Undo", not just "OK"
Iconaria-hidden="true"The icon is decorative — colour and title already communicate the type

API

Class / attrOnDescription
.alert<div role="alert">Wrapper. Sets internal CSS custom props, padding: 16px, border-radius: 8px, display: flex; flex-direction: column; gap: 8px. Default = Brand Semi-filled.
.alert-brand / -info / -danger / -success / -warning / -notice / -alert.alertColour modifiers. Sets the 5 colour-specific CSS custom properties that drive bg, text, border, and button colours for all three variants.
.alert-filled.alertFilled variant — solid accent bg, all-white text and icons. Primary button inverts to white bg + accent text.
.alert-border.alertBorder variant — page bg (--color-bg), coloured hairline border, same coloured icon/title as Semi-filled.
.alert-header<div>Flex row: icon · title · close button.
.alert-icon<span>20×20 SVG icon slot, inherits the alert accent colour.
.alert-title<span>Body 1 Medium (16/24) in the accent colour. Fills available space (flex: 1).
.alert-close<button aria-label="Dismiss">24×24 icon button, transparent, uses accent colour at 75% opacity. Fades to full opacity on hover.
.alert-body<p>Body 2 Regular (14/24). Uses page heading colour in Semi/Border, white in Filled.
.alert-actions<div>Flex row of action buttons (wrap enabled).
.alert-btn-primary<button>Caption 1 Semi Bold (12/16). In Semi/Border: accent bg + white text. In Filled: white bg + accent text.
.alert-btn-secondary<button>Caption 1 Semi Bold. Transparent bg, 1px border. Border and text = accent in Semi/Border; white in Filled.
role="alert".alertARIA live region — assistive tech announces the content immediately. Use role="status" for lower-priority informational alerts.
--alert-{color}-semi-bg / -semi-textTokenSemi-filled background and accent text/icon colour.
--alert-{color}-filled-bg / -filled-textTokenFilled variant background + text colour (white for all colours except Brand which inverts in dark mode).
--alert-{color}-brd-borderTokenBorder variant border colour (10% alpha tint of the accent).