Go to AntUIKit homepage

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 FigmaLLMs

Accessibility

What Actions does for you, and what it leaves to the page around it.

Items are not buttons

Each entry in items renders as a <div> with a click handler. It has no button role, takes no focus and answers no key, and its icon is hidden from screen readers. A keyboard user cannot reach it, and a screen reader user does not know it is there.
  • label does not fix this. It is a tooltip that shows on mouse hover, and it is not shown at all on mobile.
  • For a row that has to work from the keyboard, render each action with actionRender as a real Button with an aria-label. You keep the row's layout and spacing.
  • Do the same for a menu: an item with subItems opens on hover or click only. Render a Dropdown around a Button instead, which opens from the keyboard.
1
{
2
key: "retry",
3
actionRender: () => (
4
<Button
5
type="text"
6
size="small"
7
icon={<Icon name="reload" />}
8
aria-label="Retry"
9
onClick={retry}
10
/>
11
),
12
}

Actions.Copy

Actions.Copy renders a real <button type="button">. It is focusable, works with Enter and Space, and is named “Copy”, then “Copied” after a click. The words follow the locale you set on ConfigProvider.
  • The change of name is not announced on its own. If the reader needs to hear that the copy worked, write it into a polite live region of your own.
  • When a row holds several copy buttons (the reply, a code block, a link), the names repeat. Wrap each one so its context is clear, or put the copy action next to the thing it copies.

Actions.Feedback

The like and dislike buttons are <span>s with click handlers. They take no focus, have no name and carry no pressed state, and after a choice the other button leaves the page.
  • Where feedback has to be keyboard accessible, build the pair from two Buttons with aria-label and aria-pressed, and render it through actionRender.
  • Keep both buttons on the page after a choice, so a reader can change their answer in one step and hear which one is pressed.

Actions.Audio and Actions.Item

Both render a <div>. The status shows as a glyph and as the tooltip text (“Play audio”, “Audio playing”), and neither reaches a screen reader.
  • Both pass ARIA and DOM attributes to that <div>, so you can make one a button: role="button", tabIndex={0}, an aria-label that changes with the status, and an onKeyDown that runs your handler on Enter and Space.
  • For a play button, aria-pressed while running tells the reader the audio is on.
  • An error status shows only an error glyph. Say what failed somewhere a screen reader hears it.

Contrast and target size

The icons use the main text color, with a light fill behind them on hover. danger items use the error color.
  • Check the icons against the message background in your theme, in light and dark mode, most of all on a colored bubble. Icons need 3:1 against what is behind them.
  • Each item is the small control height. On a touch screen, leave space between rows of actions so a tap does not land on the neighbor.
  • danger is a color only. The name of the action has to say it is destructive.
Graphic and animationAttachments
© 2026 AntUIKit . All rights reserved.