# Inline Feedback

> Confirm or reject a local action without interrupting the workflow.

- Category: Feedback
- Kind: component
- Page: https://uaiblocks.dev/components/inline-feedback
- Registry item: https://uaiblocks.dev/r/inline-feedback.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/inline-feedback.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/inline-feedback.json
```

## 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>
  );
}
```

## Anatomy

- `InlineFeedback`
  - `InlineFeedbackAction`
  - `InlineFeedbackStatus`
    - `InlineFeedbackMessage`

## Accessibility

- 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.