---
title: 'Ai.Actions'
description: 'Shows buttons for a message, like copy or feedback.'
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.087Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Ai.Actions

**Experimental:** The AI extension and its component APIs may change in the future. Please give us feedback on your experience with them.

## Import

```tsx
import { Action, Actions } from '@dnb/eufemia/extensions/ai'
import '@dnb/eufemia/extensions/ai/style'
render(
  <Actions>
    <Action icon="thumbs_up" label="Good answer" />
  </Actions>
)
```

## Description

`Ai.Actions` with `Ai.Action` shows icon buttons below a message, like copy, feedback or regenerate. Give them to the `actions` property of [Ai.Message](/web/patterns-and-extensions/ai/Message/). Each `Ai.Action` is a small tertiary [Button](/web/components/button/) with a default-size icon and an expanded touch area. Its `label` is used for the tooltip and for screen readers. Actions have `0.375rem` spacing, and unselected icons use the theme's neutral alternative color.

For feedback, control `selected` from your application. It applies Button's selected styling and exposes `aria-pressed` as `true` or `false`. Keep the label unchanged when selection changes. Store one choice per answer, so positive and negative feedback cannot both be selected, and allow the selected action to clear the choice. Omit `selected` for ordinary commands such as regenerate. An explicit `aria-pressed` is still forwarded if your application needs to control it separately.

The application owns feedback storage, requests and errors. Selection alone does not confirm that feedback reached a server. Use `disabled` while saving if users should not change the choice, and show a useful error if saving fails. The [message actions demo](/web/patterns-and-extensions/ai/Actions/demos/#message-actions) demonstrates selection locally.

For copying a response, place [CopyOnClick.Button](/web/components/copy-on-click/) inside `Ai.Actions`. Pass `size="small"`, `iconSize="default"` and `bounding` to match the other actions. Set the text as `copyContent`, and provide a descriptive `title` and `tooltip`, such as "Copy answer". It handles the clipboard and announces a confirmation only after a successful copy. The [message actions demo](/web/patterns-and-extensions/ai/Message/demos/#message-actions) shows this composition.


## Demos

### Message actions

Copy the answer, select positive or negative feedback, switch the selection, or press the selected action again to clear it. The feedback state is local to this demo. Each action has a tooltip and supports keyboard activation.


```tsx
const Feedback = () => {
  const [feedback, setFeedback] = useState<'positive' | 'negative' | null>(null);
  return <Message name="Aino" actions={<Actions role="group" aria-label="Answer feedback">
                  <CopyOnClick.Button size="small" iconSize="default" bounding copyContent="Your card is now blocked." title="Copy answer" tooltip="Copy answer" />
                  <Action icon={thumbs_up} label="Good answer" selected={feedback === 'positive'} onClick={() => setFeedback(feedback === 'positive' ? null : 'positive')} />
                  <Action icon={thumbs_down} label="Bad answer" selected={feedback === 'negative'} onClick={() => setFeedback(feedback === 'negative' ? null : 'negative')} />
                </Actions>}>
              Your card is now blocked.
            </Message>;
};
render(<Feedback />);
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Ai.Actions properties


```json
{
  "props": {
    "children": {
      "doc": "One or more `Ai.Action`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```


## Ai.Action properties


```json
{
  "props": {
    "selected": {
      "doc": "Controlled feedback selection. When provided, exposes `aria-pressed`. Omit for ordinary actions such as regenerate.",
      "type": "boolean",
      "status": "optional"
    },
    "label": {
      "doc": "Label used for the tooltip and for screen readers.",
      "type": "string",
      "status": "required"
    },
    "icon": {
      "doc": "The icon to show.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Button](/uilib/components/button/properties)": {
      "doc": "Other Button properties like `onClick` or `disabled` are supported. Defaults to small buttons with default-size icons and an expanded touch area.",
      "type": "Various",
      "status": "optional"
    }
  }
}
```