Feedback Form

Collapsed pill that morphs into an expanded feedback panel with a send button and a textarea.

Installation

npx shadcn@latest add @iconiq/feedback

File Structure

Usage

"use client";

import { FeedbackForm } from "@/components/ui/feedback";

export function FeedbackFormPreview() {
  return (
    <FeedbackForm
      label="Iconiq UI"
      placeholder="What's on your mind?"
      onSubmit={async (value) => {
        await fetch("/api/feedback", {
          method: "POST",
          body: JSON.stringify({ value }),
        });
      }}
    />
  );
}

Props

Props
Description

FeedbackForm

label

Text shown next to the indicator dot in the collapsed pill, to the left of the Feedback trigger.

Type string·Default "Iconiq UI"

placeholder

Placeholder shown in the expanded textarea. Unset by default — pass your own copy.

Type string

onSubmit

Called with the trimmed value when the Send button is clicked or Cmd/Ctrl+Enter is pressed. Return a promise to keep the Send button in a loading state until it resolves — the panel only collapses back to the pill after that. Throwing keeps the panel open so the user can retry.

Type (value: string) => void | Promise<void>

className

Extra classes applied to the outer morphing container.

Type string

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.