Feedback buttons

01Preview

Change the controls to try every supported combination. Copy writes the sample answer to your clipboard.

const [rating, setRating] = useState<FeedbackValue>(null)

<div className="answer-actions">
  <CopyButton text={answer} />
  <FeedbackButtons
    value={rating}
    onValueChange={setRating}
    onTellUsMore={(r) => openFeedbackForm(r)}
  />
</div>

02Installation

pnpm add @nuton/ui @nuton/tokens

npm install @nuton/ui @nuton/tokens

yarn add @nuton/ui @nuton/tokens

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { CopyButton, FeedbackButtons, type FeedbackValue } from '@nuton/ui'

const [rating, setRating] = useState<FeedbackValue>(null)

<CopyButton text={answer} />
<FeedbackButtons
  value={rating}
  onValueChange={(r) => { setRating(r); saveRating(answerId, r) }}
  onTellUsMore={(r) => openFeedbackForm(answerId, r)}
/>

• FeedbackButtons is a named group of two toggle buttons (aria-pressed). Pressing the pressed one clears the rating.
• After a rating it says “Thanks for your feedback” in a polite status message. With onTellUsMore it also offers “Tell us more”; open a short form and move focus into it.
• CopyButton shows the check and “Copied” for 2 seconds only after the clipboard write succeeds, and announces it. Its name stays “Copy”.
• Inside a region that already announces changes, such as a chat log, set announce={false} so nothing is read twice.
• Rename the strings for the content: “Rate this summary”, “Copy card”.

04Variants and sizes

Appearances

Figma's Type: Lighter (default) and Stroke. Ghost (no fill) is code-only, for dense toolbars.

<FeedbackButtons />
<FeedbackButtons appearance="stroke" />
<FeedbackButtons appearance="ghost" />

Sizes

<CopyButton text="…" />
<FeedbackButtons />
<CopyButton text="…" size="md" />
<FeedbackButtons size="md" />

Copy with a text label

<CopyButton text={summary} showLabel appearance="stroke" />

05States and interactions

State tokens

Set on .nu-feedback-action.

06Composition examples

AI Tutor answer with a follow-up form

“Tell us more” opens a short form and moves focus into it. Sending it confirms in a status message.

<p>{answer}</p>
<div className="answer-actions">
  <CopyButton text={answer} />
  <FeedbackButtons value={rating} onValueChange={setRating} onTellUsMore={openForm} />
</div>
{formFor ? (
  <form onSubmit={send}>
    <Field label={formFor === 'good' ? 'What was helpful?' : 'What went wrong?'}>
      <Textarea ref={textRef} rows={3} />
    </Field>
    <Button intent="primary" size="sm" type="submit">Send</Button>
  </form>
) : null}

Summaries and flashcards

Rename the strings for the content being rated and copied.

<CopyButton
  text={() => summary.plainText}
  showLabel
  appearance="stroke"
  labels={{ copy: 'Copy summary', copied: 'Summary copied' }}
/>
<FeedbackButtons
  appearance="stroke"
  labels={{ group: 'Rate this summary', good: 'Helpful summary', bad: 'Not helpful' }}
/>

In Chat

ChatMessageActions in Chat shows the same Copy and rating buttons under AI Tutor answers.

07API reference

FeedbackButtons props

CopyButton props

Accessibility

You must: save the rating, keep the label strings specific to the content, and turn announce off inside an existing live region.

Figma mapping

08Guidelines and related components

Do and don't

Related components

• ChatAI Tutor answers with Copy and rating actions.
• TooltipNames icon-only buttons on hover and focus.
• FlashcardStudy cards people can rate and copy.