# antuikit / Actions

> Actions, a row of icon buttons under a chat reply, with the more and copy glyphs drawn from the icon pack and `Actions.Copy`, `Actions.Feedback`, `Actions.Item` and `Actions.Audio` attached.

Docs: https://antuikit.com/docs/components/actions

## Install

npx antuikit@latest init
npx antuikit@latest add actions

## Import

import { Actions } from "@/components/ui/actions";

## Demos

- [Basic](https://ui.antuikit.com/embed/actions/basic.md): Pass `items` with an `icon` and a `label` each, and set `danger` on an item that deletes something.
- [Sub items](https://ui.antuikit.com/embed/actions/sub-items.md): Give an item `subItems` to collect the rarer actions in a menu behind a more button.
- [Variants](https://ui.antuikit.com/embed/actions/variants.md): Set `variant` to `borderless`, `filled` or `outlined` to change how the row of actions stands out.
- [Copy](https://ui.antuikit.com/embed/actions/copy.md): Render `Actions.Copy` from an item's `actionRender` to copy `text`, with a check mark once it is copied.
- [Feedback](https://ui.antuikit.com/embed/actions/feedback.md): Render `Actions.Feedback` to let the reader like or dislike a reply, controlled through `value` and `onChange`.
- [Audio](https://ui.antuikit.com/embed/actions/audio.md): Render `Actions.Audio` and move its `status` from `loading` to `running` and back as playback starts and stops.
- [Item status](https://ui.antuikit.com/embed/actions/item-status.md): Render `Actions.Item` with a `defaultIcon` and a `runningIcon`, and set `status` to show a spinner and then a done state.
- [Fade in](https://ui.antuikit.com/embed/actions/fade-in.md): Set `fadeInLeft` to fade the actions in from the left when the row mounts, or `fadeIn` to fade them in place.
- [Under a reply](https://ui.antuikit.com/embed/actions/message.md): An assistant reply with copy, retry and feedback actions in the bubble's footer.
- [Code answer](https://ui.antuikit.com/embed/actions/code-answer.md): A coding assistant reply with copy, insert and regenerate actions under the code, and sharing options behind a more button.
- [Image result](https://ui.antuikit.com/embed/actions/image-result.md): A generated image with download, variations and upscale actions under its prompt, and delete behind a more button.
- [Hover toolbar](https://ui.antuikit.com/embed/actions/hover-toolbar.md): A team chat where each message shows its like, reply and edit actions only when the pointer is over it or focus is inside.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/actions`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Actions` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.