Alert

OverviewCopy Anchor Link

An alert lives inline in the page layout — above a form, at the top of a section — and stays visible until the underlying condition changes or the user dismisses it. It never floats above content and never disappears on its own.

When to useCopy Anchor Link

Use an alert when:

• The information applies to the whole page or section, not a single field (system status, an expired session, a pending review).
• The message should persist until the user deals with it or navigates away — not vanish after a few seconds.

Consider another component when:

• The feedback is tied to a single field's value — use the input's own error/warning/success state instead.
• The message is a one-off confirmation of an action the user just took and can safely disappear on its own — use Toast.
• The message needs to interrupt the user and block further action until resolved — use a Dialog.

AnatomyCopy Anchor Link

An alert is a single-row container with a leading icon, a text body, and an optional close button — three parts sharing one set of intent tokens.

Tokens and values that drive each partCopy Anchor Link

Intent variantsCopy Anchor Link

An alert ships seven intents. With no modifier class, .nm-alert renders as info — the same as adding nm-alert--info explicitly.

Content typesCopy Anchor Link

With a linkCopy Anchor Link

.nm-alert__link inherits the alert's text color and only adds weight and underline — it never introduces a separate link color, so it stays legible against every intent.

DismissibleCopy Anchor Link

Add .nm-alert__close as a real <button> when the condition is safe for the user to acknowledge and hide. Don't add a close button when the alert reflects a state the user still needs to resolve.

Light & dark themeCopy Anchor Link

Alert tokens read from the shared --palette-callout-* scale, so no per-component dark override is needed — the palette layer already remaps under data-theme="dark".

Both previews are locked — they don't follow the page theme switcher.

Do & don'tCopy Anchor Link

AccessibilityCopy Anchor Link

SemanticsCopy Anchor Link

• Give the alert container role="status" for informational intents, or role="alert" for negative/warning so assistive tech announces it immediately.
• The icon is decorative and duplicates the intent already carried by color and text — mark it aria-hidden="true".

DismissalCopy Anchor Link

• The close button must be a real <button> with aria-label="Dismiss" (or similarly explicit) — never a bare icon with a click handler.
• Removing an alert from the DOM on dismiss is enough; no focus management is required unless the alert was the page's only interactive landmark.

ColorCopy Anchor Link

• Never rely on the border/background color alone to communicate severity — the icon and text must independently make the intent clear.

Token referenceCopy Anchor Link

ImplementationCopy Anchor Link

No JavaScript is required for a static alert — it's a styled <div> with a text body, only the optional close button needs a click handler.

<link rel="stylesheet" href="namirial-theme.css">

<div class="nm-alert nm-alert--warning" role="alert">
  <span class="nm-alert__icon" aria-hidden="true"><!-- icon --></span>
  <span class="nm-alert__body">Your trial ends in 3 days.</span>
  <button type="button" class="nm-alert__close" aria-label="Dismiss"><!-- x icon --></button>
</div>

CSS classesCopy Anchor Link