Message Actions
View on StorybookStorybookFlexible action buttons for chat messages. Supports common actions like copy, regenerate, share, and bookmark. Fully customizable with icons, tooltips, and RTL support.
Preview
Installation
Usage
Examples
Full Featured
Assistant Message Actions
Typical actions for AI assistant responses:
User Message Actions
Typical actions for user messages:
Compact Mode
Use compact mode for space-constrained layouts:
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)
Use Cases
Copy, regenerate, and rate AI responses
Message-level actions in chat
Feedback collection on generated content
Share and export options for responses
Best Practices
Do
- ✓ Show actions on hover or focus for clean UI
- ✓ Include copy-to-clipboard as a standard action
- ✓ Position consistently relative to the message
Don't
- ✗ Don't show too many actions — group less common ones in a menu
- ✗ Don't make actions compete with message content for attention
- ✗ Don't omit keyboard accessibility for action buttons