Skip to content

ComponentsMessage actions

Components

Message actions

The 24px action toolbar under a message: hover / focus reveal, toggles, copy feedback, roving focus.

Toolbar

data-size=xs scope: 24×24 ghost buttons, radius 6, 16px glyphs in secondary ink (#0009 | #ffffff91), timestamp muted (#0007 | #fff6), no gap. Arrow keys move between buttons (Tab enters on one). Thumbs are toggles with the accent tint.

Assistant (always visible)
User (timestamp first), disabled action
Code transcript extras
Light
Dark

Reveal

hover: opacity 0 until the message is hovered (120 ms after a 100 ms delay; out 60 ms) or holds focus (instant). always: the last message keeps its buttons; only the timestamp fades. Touch and (hover: none) always show the row. defer mounts the buttons on the first hover / focus.

Hover the rows

You said: Hover me to reveal the actions

Hover me to reveal the actions

Assistant responded

Hover or tab into this reply: its actions appear. The row height (24px) stays reserved while hidden.

Assistant responded

The last reply keeps its buttons visible; only the timestamp waits for hover.