Feedback · core

Inline alert

feedback.inline-alert

Inline alert: A system response that communicates progress, status, completion, or a problem.

inline alertthe system messagethe progress or status indicator

States5

Touch targetDisplay

Evidence4

Introduced by8 kits

Visual specimen

Same contract. Every kit voice.

Inline alertInline alert: A system response that communicates progress, status, completion, or a problem.

MAVAN renderingerror

Translation table

What code calls it.

Webstatus patternThis component is composed from multiple web primitives.pattern

ARIAalertThe primary accessibility role or state pattern.direct

SwiftUIAlertThe nearest named SwiftUI API.direct

AppKitNSAlertThe nearest named AppKit API.direct

Anatomy

Every part, named.

1Status container
2Signal or progress indicator
3Primary message
4Optional supporting detail or dismissal

Often confused with

Similar shape. Different contract.

Toastfeedback.toast

Shares a visual family, but has a different role, state model, or interaction contract.

Bannerfeedback.banner

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Inline alert component (feedback.inline-alert). Inline alert: A system response that communicates progress, status, completion, or a problem. Support these states: neutral, success, warning, error, loading. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

neutral · success · warning · error · loading

Required evidence

implementation · state-matrix · responsive · reduced-motion

Source union

mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin