Feedback
A feedback input component in Thumb and Emoji types. Includes individual reaction states — Like, Neutral, and Dislike — and is available in Small, Medium, and Large sizes.
Loading preview…
1
<Feedback type="emoji" size="lg" value={value} onValueChange={setValue} />Installation
npx sdaia-ui@latest add feedback
Usage
import { Feedback } from "@/components/ui/feedback"<Feedback type="thumb" size="medium" />Examples
Thumb
Thumbs up and thumbs down feedback buttons.
Loading preview…
1
<Feedback type="thumb" value={value} onValueChange={setValue} />Emoji
Emoji reaction buttons for expressive feedback.
Loading preview…
1
<Feedback type="emoji" value={value} onValueChange={setValue} />Sizes
Feedback available in Small, Medium, and Large sizes.
Loading preview…
1
<Feedback type="thumb" size="sm" />2
<Feedback type="thumb" size="md" />3
<Feedback type="thumb" size="lg" />Reactions
Individual reaction buttons showing Like, Neutral, and Dislike states in both Thumb and Emoji types.
Loading preview…
1
<FeedbackReaction type="emoji" feedback="dislike" checked={false} />2
<FeedbackReaction type="emoji" feedback="neutral" checked />3
<FeedbackReaction type="emoji" feedback="like" checked />API Reference
Feedback Props
Props for the Feedback component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'emoji' | 'thumb' | thumb | optional |
size | 'sm' | 'md' | 'lg'", | md | optional |
value | 'like' | 'neutral' | 'dislike' | null | - | optional |
onValueChange | (value: 'like' | 'neutral' | 'dislike' | null) => void" | - | optional |
disabled | boolean | false | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |