Skip to content
Atomus

Feedback

Thumbs up and down on a reply. A thumbs down opens a short form in place with reason chips and an optional comment.

What went wrong?

Thumbs are toggle buttons. A thumbs down opens the reason form and moves focus into it; Esc closes it.

defaultValue="down" — the reason form is openLive · light and dark follow the theme switch

Add the source to a shadcn project

npx shadcn@latest add https://docs.atomus.io/r/ai-feedback.jsonOpen in v0

Installs the component source, its CSS and the Atomus tokens into components/atomus/. How the registry works

In Figma

Section titled “In Figma”

From guidelines/components/ai-feedback.md

Properties, variants and anatomy of the Figma components. React props use the same names.

Feedback

Section titled “Feedback”

Thumbs up / down on an AI reply. A thumbs down (and, optionally, a thumbs up) opens a short form in place: reason chips, an optional comment and Send feedback. After sending, a quiet “Thanks for your feedback” replaces the form. Part of the Agent kit.

Figma: component set Feedback on the 🤖 Agent kit page of Atomus 4.0 (node 25545:219), connected to React with Code Connect. React props use the same names as the Figma properties below.

Property Type / options
Rating None · Up · Down
Reasons list (text)
Size xs · sm
Form boolean (opens after a rating)

Use for

  • The actions row of an assistant Message.
  • Rating a generated draft, summary or image.

Not for

  • Product surveys or NPS: use a form or Modal.

Accessibility

  • Thumbs are toggle buttons (aria-pressed) named “Good response” and “Bad response”.
  • The form opens because the person asked for it, so focus moves to its first reason; Esc closes it.
  • Reason chips are toggle buttons; the confirmation is announced in a status region.

Usage

Section titled “Usage”
import { Feedback } from '@stanvision/atomus-react';


<Feedback
  onChange={(rating) => track('rating', rating)}
  onSubmit={({ rating, reasons, comment }) => sendFeedback(messageId, rating, reasons, comment)}
/>

Props at a glance

Section titled “Props at a glance”

Full types and defaults are in React API at the end of the page.

  • value / defaultValue / onChange — 'up', 'down' or null.
  • reasons for a thumbs down (defaults provided); positiveReasons opens a form for a thumbs up too.
  • onSubmit receives { rating, reasons, comment }.

Design guidance

Section titled “Design guidance”

From the Figma guidelines.

Do

  • Keep reasons short and specific: “Not accurate”, “Too long”, “Didn’t follow instructions”.
  • Make the comment optional and send the rating even when the form is closed.

Forbidden

  • Never require a reason or a comment.
  • Never open the form for a thumbs up unless you offer positive reasons.

React API

Section titled “React API”

Generated from react/src/components by scripts/gen-react-api.mjs — the same tables agents read in guidelines/components/ai-feedback.md.

Use only these props; anything else is not part of the API.

Feedback

Section titled “Feedback”

Figma: Feedback — thumbs up / down on an AI reply, with an optional reason form. Thumbs are toggle buttons (aria-pressed); the form opens in place and takes focus.

import { Feedback } from '@stanvision/atomus-react'; — source: react/src/components/ai/Feedback.tsx

Prop Type Default Description
value 'up' | 'down' | null — Figma: Rating (controlled); null clears it
defaultValue 'up' | 'down' | null null Initial rating when uncontrolled
onChange (rating: 'up' | 'down' | null) => void — Called on every thumb press
onSubmit (feedback: FeedbackSubmission) => void — Called when the reason form is sent
reasons string[] DEFAULT_REASONS Figma: Reasons — chips offered after a thumbs down
positiveReasons string[] [] Reasons offered after a thumbs up; no form opens for a thumbs up when empty
size 'xs' | 'sm' 'xs' Figma: Size — xs 24 · sm 32
className string — Extra class on the root element (layout only — never restyle colours or sizes).

Accepts only the props above.

FeedbackSubmission:

Field Type Description
rating 'up' | 'down' The thumb that was pressed
reasons string[] The reason chips the person picked
comment string Free text, may be empty