Message Actions
Flexible action buttons for chat messages. Supports common actions like copy, regenerate, share, and bookmark. Fully customizable with icons, tooltips, and RTL support.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
Full Featured
tsx
Assistant Message Actions
Typical actions for AI assistant responses:
tsx
User Message Actions
Typical actions for user messages:
tsx
Compact Mode
Use compact mode for space-constrained layouts:
tsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
showCopy | boolean | true | |
showRegenerate | boolean | false | |
showEdit | boolean | false | |
showShare | boolean | false | |
showFlag | boolean | false | |
showFeedback | boolean | false | |
onCopy | () => void | — | |
onRegenerate | () => void | — | |
onEdit | () => void | — | |
onShare | () => void | — | |
onFlag | () => void | — | |
onThumbsUp | () => void | — | |
onThumbsDown | () => void | — | |
isRTL | boolean | false | |
compact | boolean | false |
Accessibility
Tooltips
All action buttons include descriptive tooltips that appear on hover and focus.
Keyboard Navigation
Fully keyboard accessible with Tab navigation and Enter/Space to activate.
ARIA Labels
Each button has a proper aria-label for screen reader users.
RTL Support
Action buttons automatically reverse order in RTL layout. Icon positioning and spacing adapt to text direction.
Left-to-Right (LTR)
Right-to-Left (RTL)
Related Components
Chat Message
Chat message container
Prompt Input
Message input component