FeedbackBar
StableThumbs up and down buttons, with a short list of reasons after a thumbs down.
Also known as thumbs up down, rating, feedback, like dislike
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Interactive
No feedback sent.
<FeedbackBar onSubmit={(rating, reason) => console.log(rating, reason)} />Try thumbs down to see the reasons. The line below shows what was sent.
When to use it
A quick way to say whether a reply helped. A thumbs down asks why with one tap, and Skip keeps the reason optional.
Made of: Thumbs up · Thumbs down · Reasons and Skip · Thank-you message
Use it for
- Under a finished assistant reply.
- Collecting a reason when a reply was wrong, unhelpful or unsafe.
Not for
- Copying or retrying a reply: use MessageActions.
- A detailed written report or survey.
Do and avoid
Do
- Show it after a reply is finished, next to the message actions.
- Keep the thank-you short and plain.
- Save the answer in onSubmit. The part only hands it to you.
- Change resetKey when a new message arrives, so the bar starts fresh.
Avoid
- Do not force a reason. Keep Skip so people can send just the rating.
- Do not reuse one bar for several messages without a resetKey. It will not clear itself.
- Do not use it for general surveys. It rates one reply.
On a phone
- The thumb buttons stay 28px square on touch screens and have a 44px tap area.
- After a thumbs down the reasons wrap onto new rows. Each keeps its size and has a 44px tap area on touch screens.
- Nothing needs hover, and the thank-you line is shown beside the thumbs.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmitrequired | (rating: "up" | "down", reason?: string) => void | none | Called once per message. Thumbs up sends only the rating. A reason button sends rating down and the reason text. Skip sends rating down with no reason. |
| resetKey | unknown | none | Any value, such as the message id. When it changes, the bar clears its rating and returns to the thumbs. It does not reset on first render. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- reason picker
- After a thumbs down, a row of reasons and a Skip button appears below the icons.
- submitted
- After a rating is sent a thank-you message appears and further clicks are ignored until resetKey changes.
- focus
- The thumb buttons and reason buttons show a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--fg-muted--accent-soft--accent-fg--border
Built in
- The thumbs are named "Good response" and "Bad response", and screen readers say which one is pressed.
- After a rating is sent, the chosen thumb stays pressed and pressing either does nothing.
- The reasons form a group named "What went wrong?". Each reason and Skip is a real button the keyboard can reach.
- The thank-you line is announced politely when it appears.
What you need to do
- Keep it directly under the reply it rates. Every bar uses the same button names, so position tells screen reader users which reply they are rating.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide