Feedback · core

Notification item

feedback.notification-item

Notification item: A system response that communicates progress, status, completion, or a problem.

notification itemthe system messagethe progress or status indicator

States5

Touch targetDisplay

Evidence4

Introduced by1 kits

Visual specimen

Same contract. Every kit voice.

Notification itemNotification item: 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

ARIAstatusNo single ARIA role represents the complete component.pattern

SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation

AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation

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.

Inline alertfeedback.inline-alert

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 Notification item component (feedback.notification-item). Notification item: 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

purple-rain