Feedback

Thumbs up or down, with an optional reason. The rating sends on click and the comment is a separate follow-up — holding the rating hostage to a comment box is how feedback widgets collect nothing.

src/components/ui/feedback.tsx

About

From the component's own source, where it was written.

Thumbs up or down on a response, with an optional reason.

The rating is sent the moment it is clicked; the reason is a separate, optional follow-up. Holding the rating hostage to a comment box is how feedback widgets collect almost nothing — the signal you actually get is the click, and asking for prose first loses it.

A second click on the same thumb clears the rating, because the most common correction is having hit the wrong one.

Install

npx astralyx-ui add feedback

Usage

import { Feedback } from '@/components/ui/feedback'

<Feedback
  onRate={send}
  onComment={sendComment}
  reasons={['Incorrect', 'Too vague', 'Ignored context']}
/>

Composer

Change the props and the source below follows.

Was this helpful?

Props

quick reasonscomment box

tsx

<Feedback
  onRate={send}
  onComment={sendComment}
  reasons={['Incorrect', 'Too vague', 'Ignored context']}
/>

Examples

Rating

tsx

<Feedback onRate={send} onComment={sendComment} reasons={reasons} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Feedback`

Extends Omit<ComponentProps<'div'>, 'onChange'>.

Prop	Type	Default	Description
rating	Rating \| null	—	Controlled or uncontrolled. Clicking the active thumb clears it, since the most common correction is having hit the wrong one.
onRate	(rating: Rating \| null) => void	—	Controlled or uncontrolled. Clicking the active thumb clears it, since the most common correction is having hit the wrong one.
onComment	(comment: string, rating: Rating \| null) => void	—	Adds the comment box. Omit for rating only.
reasons	string[]	—	Quick-pick reasons offered after a thumbs down — one tap instead of a paragraph.
prompt	ReactNode	'Was this helpful?'	Leading text.
commentLabel	string	'Additional feedback'	Accessible name for the free-text field.
commentPlaceholder	string	'Anything else? (optional)'	—
sendLabel	ReactNode	'Send'	—
thanksLabel	ReactNode	'Thanks — that helps.'	Confirmation shown once feedback is sent.

Types

Type	Definition	Description
`Rating`	'up' \| 'down'	Thumbs up or down on a response, with an optional reason.