---
title: 'Ai.Task'
description: 'Shows work in progress and its outcome, with optional details or results.'
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.095Z
checksum: ef77ff50263440e1478ff614e37f1cd6709ce968dcc43e942c4d77a23d5eab14
---

# Ai.Task

**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 { Task } from '@dnb/eufemia/extensions/ai'
import '@dnb/eufemia/extensions/ai/style'
render(<Task title="Looking up your transactions" />)
```

## Description

`Ai.Task` shows work in progress and its outcome, such as looking up transactions or generating a report. It shows a progress indicator while the task runs and a status when it completes, fails or is canceled. Use children for details, controls or a larger result.

Pass a human-readable `title` and a display `status`: `running`, `awaiting`, `done`, `error` or `canceled`. Your application owns the task and maps its state to these values. An AI framework tool call can be one source of that state.

Use children for a useful result, such as a balance or a confirmation, and `errorText` for a user-facing error. The component does not execute work or make requests. For actions requiring confirmation, show `status="awaiting"`, render your confirmation controls as children, and pass the user's decision to your chat implementation.

Task and [Ai.AgentAction](/web/patterns-and-extensions/ai/AgentAction/) both show an operation and its outcome. Choose Task for a status row with details, decision controls or structured results below it. Choose AgentAction for progress followed by a short text result and optional Undo. The choice does not depend on whether the application uses an agent or a framework tool. See [Choosing Task or AgentAction](/web/patterns-and-extensions/ai/integrations/#choosing-task-or-agentaction) for a comparison and examples.

`Ai.Task` does not create a live region. Your application owns announcements when status or results change. Use [AriaLive](/web/components/aria-live/) for meaningful updates, and avoid duplicating announcements from the surrounding conversation. See [screen reader announcements](/web/patterns-and-extensions/ai/integrations/#screen-reader-announcements).


## Demos

### Task states


```tsx
<Task title="Looking up your transactions" status="running" />
<Task top title="Blocking your card" status="awaiting" />
<Task top title="Looking up your transactions" status="done">
      <P space={0}>Your latest transactions are ready.</P>
    </Task>
<Task top title="Blocking your card" status="error" errorText="The card could not be blocked. Try again later." />
<Task top title="Blocking your card" status="canceled" />
```

<!-- 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 -->

## Properties


```json
{
  "props": {
    "title": {
      "doc": "What the task does, e.g. `Looking up your transactions`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "status": {
      "doc": "Display status of the task. Defaults to `running`.",
      "type": [
        "\"running\"",
        "\"awaiting\"",
        "\"done\"",
        "\"error\"",
        "\"canceled\""
      ],
      "status": "optional"
    },
    "errorText": {
      "doc": "Error shown when the status is `error`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "children": {
      "doc": "Content shown below the status, e.g. the result of the task.",
      "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                 |
| -------------------------- | --------------------- | ------------------------ | --------------------- | --------------------- |
| `taskRunning`              | Pågår                 | In progress              | Pågår                 | I gang                |
| `taskDone`                 | Fullført              | Completed                | Slutförd              | Fuldført              |
| `taskError`                | Feilet                | Failed                   | Misslyckades          | Mislykkedes           |
| `taskAwaitingConfirmation` | Venter på bekreftelse | Waiting for confirmation | Väntar på bekräftelse | Venter på bekræftelse |
| `canceled`                 | Avbrutt               | Cancelled                | Avbruten              | Annulleret            |