Zetta v1.6

Components · Data display & feedback

Inline message

The smallest unit of feedback — a 12px line with a leading icon that sits right beside the thing it describes. Field validation, a hint under an input, a short status. Colour comes from the semantic -text token, so it stays readable on the canvas.

Preview

Password must be at least 12 characters. Username is available. We'll never share your email. Learn more

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Inline message" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `inline-message` spec (variants: neutral, info, success, warning, danger) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `inline-message` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

[icon] Message text with optional link

Parts:

  • inline-message-icon — 16px icon, same color as text
  • inline-message-text — message body
  • inline-message-link — optional inline link (500 weight, underlined)

Inline Message has no interactive states. It is purely presentational. If a link is included inside the message body, the link uses standard {colors.primary} link tokens.

When to use

  • Displaying form field validation results below the field (error: "This field is required").
  • Showing contextual hints about a specific row or cell in a table.
  • Providing a status note inside a compact card or panel without using an alert.
  • Pointing to a related action via an inline link: "You don't have access. Request access."

When not to use

  • Page-level or session-level alerts — use Banner.
  • Section-level status messages — use Section Message.
  • Transient confirmation after an action — use Toast.
  • Error summaries at the top of a form — use Section Message or a field-level error list.

Do

  • Place inline messages directly below or beside the element they describe.
  • Use the danger variant for all form validation errors — never the warning variant for required field violations.
  • Use warning for advisory messages that don't block submission.
  • Keep message text under 100 characters. For longer context, use a Section Message.

Don't

  • Don't stack multiple inline messages on the same element — show the most critical one only.
  • Don't use inline messages to replace a tooltip — they are persistent, tooltips are on-demand.
  • Don't rely on color alone to communicate the state — the icon and message text are required.
  • Error messages (danger): direct and specific. "Password must be at least 8 characters" not "Invalid input".
  • Warning messages: explain the risk without alarming. "This email is already in use on another account."
  • Success messages: confirm the action briefly. "Email address verified."
  • Info/Hint messages: instructive and forward-looking. "Changes take up to 24 hours to apply."
  • Links: action-oriented. "Learn more", "Request access", "Update now" — never "click here".

Keyboard

Inline Message is non-interactive and has no keyboard behavior. When a link is present in the message body: Tab moves focus to the link; Enter activates it.

Accessibility

  • ARIA live region: when an Inline Message appears in response to user interaction (e.g. form validation on blur), it must be inside a live region (aria-live="polite" for warnings/info, aria-live="assertive" for errors) so screen readers announce it.
  • ARIA role: use role="alert" on danger messages to force immediate announcement. Use role="status" for success and info variants.
  • Icon: aria-hidden="true" on the icon — the text content carries the meaning.
  • Association with form field: when used as a field error, associate via aria-describedby on the input pointing to the inline message container.
  • Color contrast: all text variants must meet WCAG AA (4.5:1). Muted neutral text ({colors.muted}) at 12px should be verified per theme.

Spec

Values and token references resolved straight from the Zetta spec.

inline-message
display
inline-flex
alignItems
flex-start
gap
{spacing.xs}
fontFamily
Geist
fontSize
12px
fontWeight
400
lineHeight
1.5
inline-message-icon
flexShrink
0
iconSize
{icons.sizeMap.md}
marginTop
1px
inline-message-text
flex
1
inline-message-link
fontWeight
500
textDecoration
underline
cursor
pointer
inline-message-neutral
textColor
{colors.muted}
iconColor
{colors.muted}
inline-message-info
textColor
{colors.info-text}
iconColor
{colors.info-text}
inline-message-success
textColor
{colors.success-text}
iconColor
{colors.success-text}
inline-message-warning
textColor
{colors.warning-text}
iconColor
{colors.warning-text}
inline-message-danger
textColor
{colors.danger-text}
iconColor
{colors.danger-text}

Known gaps

  • Inline Message with a dismiss/close button not yet specified.
  • Tooltip-triggered inline message (on-demand contextual hint) not yet specified.