# Feedback

Gather text feedback with an associated emotion.

---

## Default

Should only be used on desktop.

```tsx
import { Feedback, Note } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <>
      <div className="hidden justify-center xl:flex">
        <Feedback label="vercel" dryRun />
      </div>
      <div className="flex justify-center xl:hidden">
        <Note>
          This example is hidden because it is intended for only desktop.
        </Note>
      </div>
    </>
  );
}
```

## Inline

```tsx
import { Feedback } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return <Feedback dryRun label="vercel" type="inline" />;
}
```

## Feedback with Select

Feedback with pre-defined list of topics.

```tsx
import { Feedback, Note } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <>
      <div className="hidden justify-center xl:flex">
        <Feedback label="vercel" showTopics dryRun />
      </div>
      <div className="flex justify-center xl:hidden">
        <Note>
          This example is hidden because it is intended for only desktop.
        </Note>
      </div>
    </>
  );
}
```

## Feedback with metadata

Feedback with arbitrary key-value metadata.

```tsx
import { Feedback, Note } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <>
      <div className="hidden justify-center xl:flex">
        <Feedback
          label="vercel"
          dryRun
          metadata={{
            userId: 'user_12345',
            location: 'post-checkout',
            orderId: 'order_123456',
          }}
        />
      </div>
      <div className="flex justify-center xl:hidden">
        <Note>
          This example is hidden because it is intended for only desktop.
        </Note>
      </div>
    </>
  );
}
```

## Feedback with prefix

```tsx
import { Feedback } from '@vercel/geistcn/components';
import { IconFlagPriority } from '@vercel/geistcn-assets/icons';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return <Feedback dryRun label="vercel" prefix={<IconFlagPriority />} />;
}
```

## Feedback with suffix

```tsx
import { Feedback } from '@vercel/geistcn/components';
import { IconFlagPriority } from '@vercel/geistcn-assets/icons';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return <Feedback dryRun label="vercel" suffix={<IconFlagPriority />} />;
}
```

## Best Practices

### When to use

* Place Feedback at the end of a page, doc, or completed flow where the user has formed an opinion. Don’t front-load it on a surface the user has only opened.
* Use the topic Select variant when feedback maps to actionable categories the team triages (`Bug`, `Pricing`, `Documentation`); skip it when the open textarea is enough.
* Don’t use Feedback as a substitute for a support form, a bug report intake, or NPS sampling. Those have dedicated surfaces.

### Behavior

* Keep the panel collapsed until the user clicks the trigger; auto-opening derails the work that prompted the feedback.
* Pair the metadata variant with non-PII context (route, build ID, plan, viewport) so the team can reproduce the report without a second round-trip.
* Submit closes the panel and returns focus to the trigger. Don’t replace the panel with a generic acknowledgment toast; the close itself is the acknowledgment.

### Content

* `label` is Title Case and short. Default `Feedback` is fine; override only when scoping to a flow: `Feedback on Imports`, `Report a Bug`. Don’t end the label with `?`.
* `copy` overrides the prompt header next to the emoji row in sentence case (`How did the import go?`). Cut `please` and `we’re sorry`.
* The textarea placeholder (`Your feedback...`) is fixed by Geist; don’t try to override it with rich children.