When to reach for Actions, how its prebuilt parts behave, and the click and state wiring it leaves to you.
When to use
Actions is the row of small icon buttons under a chat reply: copy, retry, like, dislike, read aloud, and a menu for the rest. It keeps the controls for one message next to that message.
Each action is about the message it sits under, not the conversation or the page.
The actions are familiar enough to read from an icon alone, with the name on hover.
Use something else when
The action needs words on the button to be understood, or it is the main thing the reader does next. Use a Button with a label.
The actions belong to the whole page or a table row. A toolbar of Buttons, or a Dropdown, fits better.
The reader is choosing a suggested prompt. That is Prompts.
Picking the actions
Show three or four actions in the row and put the rest in a menu with subItems. The order should match the chances of each one being used: copy first, the destructive one last.
Give every item a label, even when the icon looks obvious. It is the tooltip, and the only name a sighted mouse user gets.
Mark destructive actions with danger, and ask for confirmation before you act on them. The row has no undo.
A menu item with no icon gets the “more” glyph. Pass an icon when the menu holds one kind of thing, like share targets.
On mobile there are no tooltips, and a menu opens on tap. If you set triggerSubMenuAction: "hover" yourself, a touch screen cannot open it.
Handling clicks
Use one onClick on the row and switch on key, or an onItemClick per item. Pick one style per row.
onItemClick takes over. An item with its own onItemClick never reaches the row's onClick, so logging or analytics on the row miss it.
An actionRender item fires neither. The node you render replaces the item, so handle its click on that node.
For a menu entry, keyPath lists the entry's key and then its parent's, so you can tell two “share” entries in different menus apart.
Copy
Actions.Copy writes text to the clipboard and shows a check for a moment. Pass the reply as plain text, not the rendered node: a Markdown reply should copy as the Markdown or as clean text, whichever the reader will paste.
While a reply is still streaming, either hide the copy action or pass the text so far and say the reply is incomplete.
Feedback
Actions.Feedback is controlled: hold value in state and update it in onChange. Without that, clicks do nothing visible.
A choice hides the other button. After a like, only the filled like shows. To switch to dislike, the reader clicks like again to clear it first.
Save the value with the message, and pass it back on reload. Otherwise the reader sees both buttons again and may vote twice.
A dislike is a good moment to ask why. Open a short form from onChange when the value becomes dislike.
Audio and long-running actions
Actions.Audio and Actions.Item show a status and nothing more. They do not play audio or run anything: you set status from your own player or request, and handle onClick on them.
Move through loading while the request starts, running while it plays or runs, and back to default when it ends. Set error when it fails, and clear it on the next click.
Give Actions.Item a runningIcon. Without one, running shows defaultIcon and looks the same as at rest.
Render both inside an Actions row, through actionRender, so their glyphs come from your icon pack.
Variant
borderless suits a row under a message bubble, where the bubble already frames it. filled puts the row on a light fill, for a row that floats over content.
outlined draws no border in this version. It pads and rounds the row like filled, with no fill and no visible line. Add the border with a class on the row.
fadeIn and fadeInLeft fade the row in on mount. Use one when the row appears after a reply finishes streaming, so it does not pop in.