Message Actions

Action buttons for chat messages (copy, regenerate, edit, share, feedback). Provides a consistent interface for common message operations in chat applications.

Preview

Installation

Terminalbash

Usage

Reacttsx

Examples

Full Featured

tsx

For Assistant Messages

Typical actions for AI assistant responses:

tsx

For User Messages

Typical actions for user messages:

tsx

Compact Mode (Icon Only)

Use compact mode for space-constrained layouts:

tsx

Props

Name	Type	Default	Description
`showCopy`	`boolean`	`true`	Show copy button
`showRegenerate`	`boolean`	`false`	Show regenerate button
`showEdit`	`boolean`	`false`	Show edit button
`showShare`	`boolean`	`false`	Show share button
`showFlag`	`boolean`	`false`	Show flag/report button
`showFeedback`	`boolean`	`false`	Show feedback buttons (thumbs up/down)
`onCopy`	`() => void`	—	Callback when copy is clicked
`onRegenerate`	`() => void`	—	Callback when regenerate is clicked
`onEdit`	`() => void`	—	Callback when edit is clicked
`onShare`	`() => void`	—	Callback when share is clicked
`onFlag`	`() => void`	—	Callback when flag is clicked
`onThumbsUp`	`() => void`	—	Callback when thumbs up is clicked
`onThumbsDown`	`() => void`	—	Callback when thumbs down is clicked
`isRTL`	`boolean`	`false`	Whether text direction is RTL
`compact`	`boolean`	`false`	Compact mode (icon only)

Accessibility

Screen Reader

All buttons include screen reader labels via sr-only spans, ensuring icon-only buttons are accessible. Feedback state changes are announced appropriately.