Built-in components
FeedbackDialog and ThumbsFeedback props and behavior.
Built-in components
Optional UI included in @deck-io/feedback. Skip these when you use headless submit with your own design system.
Both components require a parent DeckProvider.
FeedbackDialog
Controlled modal for written feedback. Your app owns the open/close trigger and open state.
const [open, setOpen] = useState(false);
<button type="button" onClick={() => setOpen(true)}>
Share feedback
</button>
<FeedbackDialog
widgetId="wgt_your_widget_id"
open={open}
onOpenChange={setOpen}
context={{ surface: "settings" }}
title="How are we doing?"
onSubmitted={({ sentiment, message }) => {
// toast, analytics, etc.
}}
onError={(error) => {
console.error(error);
}}
/>Props
| Prop | Required | Default | Description |
|---|---|---|---|
widgetId | Yes | — | Widget source id (wgt_…) |
open | Yes | — | Controlled open state |
onOpenChange | Yes | — | Called when the dialog should open/close |
context | No | — | Free-form product context stored with the submission |
title | No | SDK default | Dialog title |
description | No | SDK default | Helper text |
defaultSentiment | No | — | Initial sentiment when opened (e.g. from thumbs) |
messageOptional | No | false | When false, message is required. Thumbs flow typically sets true. |
confirmText | No | SDK default | Primary button label |
cancelText | No | SDK default | Secondary button label |
className | No | — | Class on the dialog root |
onSubmitted | No | — | Called after a successful submit |
onError | No | — | Called with an error string on failure |
Sentiment options in the dialog: negative, neutral, positive.
ThumbsFeedback
Like / dislike control that opens FeedbackDialog with sentiment pre-filled. Message is optional after thumbs so completion stays high.
<ThumbsFeedback
widgetId="wgt_your_widget_id"
context={{ messageId: "msg_123" }}
label="Was this helpful?"
onSubmitted={({ sentiment, message }) => {
// optional follow-up
}}
/>Props
| Prop | Required | Default | Description |
|---|---|---|---|
widgetId | Yes | — | Widget source id (wgt_…) |
context | No | — | Free-form product context |
className | No | — | Class on the control root |
label | No | "Was this helpful?" | Accessible label for the control group |
onSubmitted | No | — | After successful submit (positive | negative) |
onError | No | — | Error callback |
Choosing a pattern
| Pattern | Use when |
|---|---|
FeedbackDialog only | You want a “Share feedback” entry point with full sentiment + message |
ThumbsFeedback | Inline quality signal (e.g. under an AI answer) |
| Both | Different surfaces, same widget or different widget ids |
| Neither | Custom UI via headless |
Next
Headless submit for fully custom forms.