#MessageActions

The small row of icon buttons under a chat message — copy, feedback, a more menu and a timestamp. Every MessageAction is a ghost icon button whose required aria-label doubles as its tooltip, so the row never needs a visible caption. By default the row is transparent until the nearest group/message parent is hovered or holds focus, keeping its 30px height so the conversation does not jump; pass visible for the latest answer. Copy is composed with Copyable and CopyableIcon, menus with DropdownMenuTrigger asChild, and feedback with aria-pressed — the row itself holds no state. Give a menu-trigger action an explicit data-testid: the trigger injects its own --trigger id, which replaces the cascaded --action one.

Source · Storybook

#Usage

import { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';
import { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';

#Examples

#Wally

Under a Wally answer: Copy, thumbs up and down, a more menu, then the timestamp. The Ellipsis button is the menu trigger and keeps its own tooltip anchored to it.

#Visible

Default versus visible. The first row stays transparent (but tabbable) until its message is hovered or focused; the second is forced on, as for the latest answer.

#Pressed feedback

Thumbs feedback is a plain toggle: pass aria-pressed and the button keeps the states-primary-active background while pressed. Click one to try it.

#Analytics

data-analytics-id and data-analytics-props go straight onto each MessageAction and land on its real <button> — also through Copyable and DropdownMenuTrigger asChild.

#Props

#MessageAction

#MessageTimestamp

#Explorer