# Feedback Bar
Source: https://ui.spencerwueste.com/docs/components/feedback-bar
Markdown: https://ui.spencerwueste.com/llm/components/feedback-bar.md

> Inline prompt asking whether a response was helpful, with action and close slots.

> Live preview: https://ui.spencerwueste.com/docs/components/feedback-bar (demo source: `src/demos/feedback-bar-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/feedback-bar.json
```

Manual install dependencies: `radix-ui`

Registry JSON: https://ui.spencerwueste.com/r/feedback-bar.json

## Usage

```tsx
import {
  FeedbackBar,
  FeedbackBarAction,
  FeedbackBarActions,
  FeedbackBarClose,
  FeedbackBarContent,
  FeedbackBarLabel,
  FeedbackBarPrompt,
} from "@/components/pandacoderz-ui/feedback-bar";
```

```tsx
<FeedbackBar>
  <FeedbackBarContent>
    <FeedbackBarPrompt>
      <FeedbackBarLabel>Was this response helpful?</FeedbackBarLabel>
    </FeedbackBarPrompt>
    <FeedbackBarActions>
      <FeedbackBarAction asChild tooltip="Good">
        <Button variant="ghost" size="icon-sm">…</Button>
      </FeedbackBarAction>
    </FeedbackBarActions>
    <FeedbackBarClose tooltip="Dismiss">
      <Button variant="ghost" size="icon-sm">…</Button>
    </FeedbackBarClose>
  </FeedbackBarContent>
</FeedbackBar>
```

## API Reference

### FeedbackBarAction

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` | Merge into the child element. |
| `tooltip` | `string \| { content, side, shortcut }` | Tooltip content and optional keyboard hint. |

### FeedbackBarClose

Same props as `FeedbackBarAction`, rendered with a left border and always `asChild`.