Message

OverviewCopy Anchor Link

A message is a compact, self-sized snippet of feedback — it hugs its content instead of stretching full-width like an alert, and it floats with a shadow rather than sitting flush in the layout. It's meant to sit near what it describes: beside a button, under a small action row, next to a list item.

When to useCopy Anchor Link

Use a message when:

• The feedback is short (a few words) and tied to a specific, local action or spot on the page.
• You want a floating, self-contained snippet rather than a full-width banner.

Consider another component when:

• The message applies to the whole page or section — use Alert instead.
• The feedback should appear briefly and disappear on its own, independent of scroll position — use Toast.
• The feedback belongs to a single form field — use the field's own help/error text.

AnatomyCopy Anchor Link

A message is an icon, a short text run, and an optional inline link — all on one row, in a card with a fixed shadow.

Tokens and values that drive each partCopy Anchor Link

Intent variantsCopy Anchor Link

Message ships seven intents, defaulting to info. Unlike Alert, the container fill never changes — only the icon, link, and text color shift.

Content typesCopy Anchor Link

With a linkCopy Anchor Link

.nm-message__link shares the icon's --nm-message-additional color, so both recolor together and stay distinct from the plain body text.

Text onlyCopy Anchor Link

Light & dark themeCopy Anchor Link

The message card fill and shadow are explicitly remapped under .dark, since — unlike Alert — its background doesn't come from the intent-driven callout scale.

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 message role="status" so assistive tech picks it up as a polite live-region update without stealing focus.
• Mark the icon aria-hidden="true" — it duplicates the color/text signal already carried by the message.

Focus & dismissalCopy Anchor Link

• A message that appears in response to an action shouldn't steal keyboard focus — announce it, don't move focus to it.
• If a message includes an "Undo" or similar link, make it a real focusable <button>/<a>, not a styled <span> with a click handler.

Token referenceCopy Anchor Link

ImplementationCopy Anchor Link

No JavaScript is required for a static message.

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

<div class="nm-message nm-message--positive" role="status">
  <span class="nm-message__icon" aria-hidden="true"><!-- icon --></span>
  <span>Draft saved</span>
  <span class="nm-message__link">Undo</span>
</div>

CSS classesCopy Anchor Link