---
title: 'Ai.Suggestions'
description: 'Shows prompts the user can choose, as chips or cards.'
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.094Z
checksum: a80ee55949a52c02254a0596e0d4c3449db162d65caaec7a24d9743d1cc66080
---

# Ai.Suggestions

**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 { Suggestion, Suggestions } from '@dnb/eufemia/extensions/ai'
import '@dnb/eufemia/extensions/ai/style'
render(
  <Suggestions>
    <Suggestion />
  </Suggestions>
)
```

## Description

Use `Ai.Suggestions` with `Ai.Suggestion` to show prompts the user can choose, e.g. on a welcome screen. Each suggestion is a default-size secondary button. `onClick` receives the `suggestion`, so the shown text can be shorter than the prompt that is sent.


## Demos

### Suggestion buttons


```tsx
render(<Suggestions>
        <Suggestion suggestion="Block my Visa card">
          block my visa
        </Suggestion>
        <Suggestion suggestion="Show my latest transactions">
          transactions
        </Suggestion>
      </Suggestions>)
```

<!-- 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.Suggestions properties

`Ai.Suggestions` supports [Space](/web/layout/space/properties) and HTML attributes. It is a group labeled with a translated text.

## Ai.Suggestion properties


```json
{
  "props": {
    "suggestion": {
      "doc": "The suggested prompt. It is shown as the text, unless `children` is given, and is sent to `onClick`.",
      "type": "string",
      "status": "required"
    },
    "icon": {
      "doc": "Icon shown before the text.",
      "type": "IconIcon",
      "defaultValue": "ai",
      "status": "optional"
    },
    "children": {
      "doc": "Content shown instead of `suggestion`.",
      "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)."
}
```


## Translations

| Key           | nb-NO   | en-GB       | sv-SE   | da-DK   |
| ------------- | ------- | ----------- | ------- | ------- |
| `suggestions` | Forslag | Suggestions | Förslag | Forslag |

## Ai.Suggestion events


```json
{
  "props": {
    "onClick": {
      "doc": "Called when the user presses the suggestion. Receives `{ suggestion, event }`.",
      "type": "function",
      "status": "optional"
    }
  }
}
```