Actions

Usage

Actions is the low-emphasis row under an assistant message: copy, retry, and feedback. Each Action is an icon-only neutral Button named by its label, which is also its tooltip. Actions puts them in one named ButtonGroup, so one action and many share a tray, a name, and the hover highlight.

When to use

Per-message actions under an assistant reply: copy, retry, thumbs up, thumbs down.
Pass the group to the actions slot of Message, which fades it in on hover and whenever focus is inside it.

When not to use

A single button with a visible label: use Button.
A row that needs selection, a roving tab stop, or arrow keys: use Toolbar.
A copy control that confirms with a label change: use CopyButton.

Composition

Actions renders ButtonGroup and nothing else. With no children (or only children that render nothing) it renders nothing, so a message without actions leaves no empty group.
Action renders Button with icon and label. The label is also the tooltip; the tooltip is visual only and is not read twice.
The group does not pass its size down: ButtonGroup sizes only direct Button children, and an Action is not one. Each Action takes size, Small (24px) by default.
className and style are not props. Place the group with the slot that holds it.
The only stylesheet rule is flex-shrink: 0 on each action, so a squeezed tray never squashes a glyph button.

Action Button / Accessibility

Actions / API and Development

On this page

When to use

When not to use

Composition

Actions

Usage

When to use

Per-message actions under an assistant reply: copy, retry, thumbs up, thumbs down.
Pass the group to the actions slot of Message, which fades it in on hover and whenever focus is inside it.

When not to use

A single button with a visible label: use Button.
A row that needs selection, a roving tab stop, or arrow keys: use Toolbar.
A copy control that confirms with a label change: use CopyButton.

Composition

Actions renders ButtonGroup and nothing else. With no children (or only children that render nothing) it renders nothing, so a message without actions leaves no empty group.
Action renders Button with icon and label. The label is also the tooltip; the tooltip is visual only and is not read twice.
The group does not pass its size down: ButtonGroup sizes only direct Button children, and an Action is not one. Each Action takes size, Small (24px) by default.
className and style are not props. Place the group with the slot that holds it.
The only stylesheet rule is flex-shrink: 0 on each action, so a squeezed tray never squashes a glyph button.

Action Button / Accessibility

Actions / API and Development

On this page

When to use

When not to use

Composition