MessageActions
The action row under an AI reply — copy, good / bad feedback as toggle buttons, and regenerate
Category: inputs · WCAG 2.2-AA · ai, chat, feedback, copy, regenerate, thumbs, actions
Props
| Prop | Type | Default | Description |
|---|---|---|---|
copyValue | string | — | The text the Copy button copies. Omit to hide Copy. |
feedback | 'good' | 'bad' | null | — | Controlled rating: `good`, `bad` or `null`. Pressing the active rating again clears it. |
defaultFeedback | 'good' | 'bad' | null | null | Initial rating when uncontrolled. |
onFeedbackChange | (feedback: 'good' | 'bad' | null) => void | — | Called with the new rating (or `null` when cleared). The rating buttons render when this or `feedback` is set; a rating also announces "Thanks for your feedback". |
onRegenerate | () => void | — | Called by the Regenerate button. Omit to hide it. |
labels | { group?: string; good?: string; bad?: string; regenerate?: string; recorded?: string } | — | Overrides for the component’s user-visible strings (i18n). |
Design tokens
--cascivo-color-text-muted--cascivo-color-ai--cascivo-color-ai-subtle
When to use
- Under each assistant message: copy the reply, rate it, or ask for another attempt
When not to use
- Stopping a response that is still generating — use AiStatus with onStop
- Actions on a non-AI item — use ButtonGroup or a Menu
How to build an accessible MessageActions in React →
Examples
Copy, rate and regenerate
<MessageActions copyValue="Refunds are available for 30 days." onFeedbackChange={() => {}} onRegenerate={() => {}} />Copy only
<MessageActions copyValue="Hello" />Related components
- CopyButton — Copy is a CopyButton
- AiStatus — AiStatus covers the in-progress phase; MessageActions appears once the reply is complete