Actions is installed into your project as a file you own. It takes the same props as Ant Design X's Actions, and draws its built-in glyphs (more, copy, like, dislike, loading, error, muted) from your icon pack. The rows that changed are marked antuikit in the API table. Actions.Copy, Actions.Feedback, Actions.Audio and Actions.Item come attached.
Install
npx antuikit@latest init
npx antuikit@latest add actions
The first command installs AntuikitProvider and the theme tokens, the second adds this component and the @ant-design/x package it builds on.
Import
From @/components/ui/actions, never from @ant-design/x. The file lives in your project, so the import is a path, not a package.
import { Actions } from "@/components/ui/actions"
Items
The row is one items array. Each item is an icon with a label, and the label shows as a tooltip on hover.
danger draws the item in the error color, for delete and the like.
subItems turns the item into a menu. It opens on hover, or on click with triggerSubMenuAction: "click". Left unset, it opens on tap on mobile. With no icon, the trigger shows the icon pack's “more” glyph.
actionRender replaces the item with your own node. It is how the prebuilt parts below go into a row.
onClick on the row fires for every item and menu entry, with its key, the item and a keyPath that runs from a menu entry up to its parent.
onItemClick on an item handles that item alone. When it is set, the row's onClick does not fire for that item.
An item drawn with actionRender fires neither. Handle the click on the node you render.
Prebuilt parts
Four parts that each need state or a status. Put them in a row through actionRender.
Actions.Copy copies text to the clipboard and swaps its copy glyph for a check. Both glyphs come from your icon pack. Pass icon to replace them.
Actions.Feedback is a like and dislike pair, controlled with value and onChange. Once the reader picks a side, only that side shows, drawn filled. Clicking it again sends default.
Actions.Audio is a play button. Set its status from your player and handle onClick on it.
Actions.Item is a button with a status, for an action that takes time: defaultIcon at rest, a spinner while loading, runningIcon while running.
Render Actions.Audio and Actions.Item inside an Actions row. Their spinner, error and muted glyphs come from your icon pack only there.
Styling
variant sets the row's surface: borderless (the default), filled or outlined. classNames and styles take root, item and itemDropdown. Each prebuilt part takes its own keys, listed in its table.
1
<Actions
2
classNames={{
3
root: "…",
4
item: "…",
5
itemDropdown: "…",
6
}}
7
/>
variant="outlined" does not draw its border in this version. Add the border with a class on the row until it does.
API Reference
Actions
Actions' props. Rows marked antuikit in the Version column are added by the kit.
ItemType
One entry of items. Rows marked antuikit in the Version column are changed by the kit.
Actions.Copy
Actions.Copy's props. Rows marked antuikit in the Version column are changed by the kit.