ThumbsUpDownFeedback is a thumbs up / thumbs down pair for collecting a single positive or negative reaction, e.g. on an AI generated response. Pressing the selected option again clears the selection.
Disabled
Usage Guidelines
Do
Use to collect a quick, low-effort reaction to a single piece of content
Place it directly next to the content it applies to
Persist the selection so the user can see the feedback they already gave
Don't
Do not use for more than two choices — use RadioField or SegmentedControl instead
Do not use as a form field with a title, helper text, or validation
Do not rely on the selection alone for detailed feedback — pair it with a text field when you need more
Accessibility
Each option has an accessibility label, customizable via positiveAccessibilityLabel and negativeAccessibilityLabel
Each option is a two-state toggle: selection is announced as checked, so it is never conveyed by the glyph alone
Props
Name
Type
Required
Description
onChange
Required
Called with the newly selected value, or undefined when the current value is deselected.
disabled
boolean
If true, both options are non-interactive and rendered in a muted color.
negativeAccessibilityLabel
string
Accessibility label for the negative (thumbs down) option.
positiveAccessibilityLabel
string
Accessibility label for the positive (thumbs up) option.
testID
string
Root test id for the primary interactive element or container.
value
ThumbsUpDownFeedbackValue
The currently selected feedback. Leave undefined for no selection.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
AiSuggestionBox, IconButton
Examples
Binary Feedback
All states.
No selection
Positive selected
Negative selected
Disabled
Disabled with selection
Inline Feedback Prompt
Paired with a static prompt and a confirmation line shown after feedback.