Inline Feedback

Install

Install manually View source on GitHub

Anatomy

InlineFeedback
InlineFeedbackAction
InlineFeedbackStatus
InlineFeedbackMessage

Accessibility3 checks

InlineFeedbackStatus stays mounted as a polite live region, so pending, success, and error messages are announced without moving focus.
While the action runs, the button keeps focus and exposes aria-busy and aria-disabled instead of becoming disabled.
Messages pair an icon with text. An optional duration returns success and error to idle; keep error copy until the person can act on it.

Feedback and state

Code example

usage.tsx

"use client";import {  InlineFeedback,  InlineFeedbackAction,  InlineFeedbackMessage,  InlineFeedbackStatus,  type InlineFeedbackVariant,} from "@/components/ui/uai/inline-feedback";const wait = (ms: number) => new Promise((resolve) => window.setTimeout(resolve, ms));export function InlineFeedbackPreview({ variant = "text" }: { variant?: InlineFeedbackVariant }) {  return (    <div style={{ display: "grid", gap: 16 }}>      <InlineFeedback variant={variant} duration={2400}>        <InlineFeedbackAction onAction={() => wait(500)}>Copy invite link</InlineFeedbackAction>        <InlineFeedbackStatus>          <InlineFeedbackMessage status="pending">Copying…</InlineFeedbackMessage>          <InlineFeedbackMessage status="success">Link copied</InlineFeedbackMessage>        </InlineFeedbackStatus>      </InlineFeedback>      <InlineFeedback variant={variant} duration={4000}>        <InlineFeedbackAction          onAction={async () => {            await wait(700);            throw new Error("Network unavailable");          }}        >          Archive thread        </InlineFeedbackAction>        <InlineFeedbackStatus>          <InlineFeedbackMessage status="pending">Archiving…</InlineFeedbackMessage>          <InlineFeedbackMessage status="success">Archived</InlineFeedbackMessage>          <InlineFeedbackMessage status="error">Couldn’t archive. Try again.</InlineFeedbackMessage>        </InlineFeedbackStatus>      </InlineFeedback>    </div>  );}

Manual installation

inline-feedback.tsx

Loading component source…