Feedback Overview
Feedback Overview summarizes collected feedback reactions with configurable label placement.
Loading preview…
1
<FeedbackOverview label="Rate our product" labelPlacement="inline" type="emoji" size="md" />Installation
npx sdaia-ui@latest add feedback-overview
Usage
import { FeedbackOverview } from "@/components/ui/feedback-overview"<FeedbackOverview labelPlacement="top" />Examples
Default
The default feedback overview with top label placement.
Loading preview…
1
<div className="flex flex-col items-start gap-[32px]">2
<FeedbackOverview label="Rate our product" labelPlacement="top" type="emoji" />3
<FeedbackOverview label="Rate our product" labelPlacement="inline" type="emoji" />4
<FeedbackOverview label="Rate our product" labelPlacement="bottom" type="emoji" />5
</div>Inline
Feedback overview with the label displayed inline beside the score.
Loading preview…
1
<FeedbackOverview2
label="Rate your experience"3
labelPlacement="inline"4
type="emoji"5
/>Top
Feedback overview with the label positioned above the score.
Loading preview…
1
<FeedbackOverview2
label="Was this article helpful?"3
labelPlacement="top"4
type="thumb"5
/>Bottom
Feedback overview with the label positioned below the score.
Loading preview…
1
<FeedbackOverview2
label="Did you find what you were looking for?"3
labelPlacement="bottom"4
type="thumb"5
/>API Reference
Feedback Overview Props
Props for the Feedback Overview component. Extends FeedbackProps.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | - | optional |
labelPlacement | 'top' | 'inline' | 'bottom' | 'top' | optional |
type | 'emoji' | 'thumb' | thumb | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
defaultValue | 'like' | 'neutral' | 'dislike' | null | - | optional |
onValueChange | (value: 'like' | 'neutral' | 'dislike' | null) => void | - | optional |
disabled | boolean | false | optional |
dir | 'ltr' | 'rtl' | ltr | optional |