Feedback

A lightweight prompt for collecting a reaction and a note.

Feedback popover

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger render={<Button variant="outline" />}>Feedback</PopoverTrigger>
  <PopoverContent className="w-64">
    {/* emoji row + textarea */}
    <Button size="sm" onClick={() => setOpen(false)}>Send</Button>
  </PopoverContent>
</Popover>

Inline, select, prefix & suffix

Inline

{/* inline, embedded in the page */}
<div className="rounded-lg border p-4">
  {/* emoji row + textarea + Send */}
</div>

{/* topic Select inside the popover */}
<Select defaultValue="bug">
  <SelectTrigger><SelectValue placeholder="Topic" /></SelectTrigger>
  <SelectContent>…</SelectContent>
</Select>

{/* prefix / suffix icons on the trigger */}
<PopoverTrigger render={<Button variant="outline" />}><MessageSquare />Feedback</PopoverTrigger>

The bordered form is embedded directly in the page (Inline). The first popover adds a topic Select (Feedback with Select) and a leading icon on its trigger (Feedback with prefix); the second trigger carries a trailing icon (Feedback with suffix). The "Attaching: path, build 1.216" line stands in for the arbitrary key-value context sent with the report (Feedback with metadata).

Markdown for agents: /design/feedback.md · spec: /design.md