Actions

A row of icon buttons under a chat reply, for copying, retrying, rating and anything else the reader can do with it.

Preview in Figma LLMs

Overview

Design

Basic

Pass items with an icon and a label each, and set danger on an item that deletes something.

Sub items

Give an item subItems to collect the rarer actions in a menu behind a more button.

Variants

Set variant to borderless, filled or outlined to change how the row of actions stands out.

Copy

Render Actions.Copy from an item's actionRender to copy text, with a check mark once it is copied.

Feedback

Render Actions.Feedback to let the reader like or dislike a reply, controlled through value and onChange.

Audio

Render Actions.Audio and move its status from loading to running and back as playback starts and stops.

Item status

Render Actions.Item with a defaultIcon and a runningIcon, and set status to show a spinner and then a done state.

Fade in

Set fadeInLeft to fade the actions in from the left when the row mounts, or fadeIn to fade them in place.

In context

The component inside real screens, with the components it usually sits beside.

Under a reply

An assistant reply with copy, retry and feedback actions in the bubble's footer.

Code answer

A coding assistant reply with copy, insert and regenerate actions under the code, and sharing options behind a more button.

Image result

A generated image with download, variations and upscale actions under its prompt, and delete behind a more button.

A team chat where each message shows its like, reply and edit actions only when the pointer is over it or focus is inside.

Graphic and animation Attachments

On This Page