ComponentsOverlays & feedback

Feedback prompt

"Was this helpful?" for help articles, docs and guides: a yes / no vote, an optional follow-up with reason chips and a comment, and a thank-you state. onSubmit gets one value; a promise shows the busy state and a rejection lets the reader retry. Results are announced in a polite live region.

components/feedback-prompt.tsxtheme · material · accent · density · font

Was this helpful?

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { FeedbackPrompt } from "@vamos-ui/react";

<FeedbackPrompt
  reasons={[{ value: "unclear", label: "Hard to follow" }, { value: "outdated", label: "Out of date" }]}
  onSubmit={(value) => saveFeedback({ page: slug, ...value })}
/>

Skip still records the vote, without reasons or comment.

The section is labelled by the question; the vote buttons use aria-pressed.

Examples

Inline, vote only

variant="inline" for page footers; followUp="never" submits the vote straight away.

…end of the article.

Did this page answer your question?

Follow-up after both answers

followUp="both" with yesReasons; the value passed to onSubmit is shown below.

Was this guide useful?

onSubmit value appears here

API

FeedbackPrompt

Prop	Type	Default
`onSubmit` Called once. A rejected promise shows the error and keeps the answer for a retry.	`(value: { helpful; reasons; comment }) => void \| Promise<void>`	`—`
`followUp` When to ask what was missing / what helped.	`"no" \| "both" \| "never"`	`"no"`
`reasons / yesReasons` Reason chips for a no / yes answer.	`{ value; label }[]`	`—`
`comment` Free-text field in the follow-up.	`boolean`	`true`
`commentHint` Hint under the comment ("Don't include personal data").	`ReactNode`	`—`
`maxLength` Comment length cap.	`number`	`1000`
`thanksDetail` Line under the thank-you.	`ReactNode`	`—`
`headingLevel` Level of the question heading.	`2 \| 3 \| 4`	`2`
`variant` Bordered panel or a top-ruled row.	`"card" \| "inline"`	`"card"`
`labels` Dictionary namespace "feedbackPrompt": question, yes, no, followUpYes, followUpNo, comment, submit, skip, thanks, error.	`Partial<FeedbackPromptLabels>`	`—`

Feature grid

File upload