AI Elements
Feedback
Thumbs up and down on a reply, with a short follow-up when something went wrong.
Feedback lets the person rate a reply with one click. A thumbs up is sent straight away. A thumbs down asks what went wrong, with a few reasons to pick from and an optional note, so the answer is useful when you read it later.
Installation
Feedback is built with the Message, Button and Textarea components.
Usage
The code above is the whole pattern. Send { vote, reasons, comment } to your backend where submit and choose update the state.
- Clicking the active vote again clears it.
- A thumbs down opens the follow-up. Cancel clears the vote.
- After sending, the buttons are disabled and a status message confirms it.
Reasons
Keep the list short and written in the reader's words. Four to six chips is enough. Let more than one apply, and keep the note optional so nobody has to write to be heard.
Accessibility
- Each vote is a button with
aria-pressed, so its state is announced. - The confirmation is a
role="status"region, so it is announced without moving focus. - The reason chips are toggle buttons with
aria-pressed.