---
title: Iterate.PushButton
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.705Z
checksum: 62080a9e8ada1d550c6364066758ac2a88199e794a7d8131f4389748381b252a
---

# Iterate.PushButton

## Import

```tsx
import { Iterate } from '@dnb/eufemia/extensions/forms'
render(<Iterate.PushButton />)
```

## Description

`Iterate.PushButton` connects to the array of a surrounding `Iterate.Array` or an array from the source pointed at through `path` and adds a new item to the array when clicked.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/forms/Iterate/PushButton)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/web/forms/Iterate/PushButton)

```tsx
import { Iterate, Form, Field } from '@dnb/eufemia/extensions/forms'

render(
  <Form.Handler>
    <Iterate.Array path="/myList">
      <Field.Name.Last itemPath="/name" />
    </Iterate.Array>

    <Iterate.PushButton
      path="/myList"
      text="Add another item"
      pushValue={{}}
    />
  </Form.Handler>
)
```

In order to create new items you can also use the [Iterate.PushContainer](/web/forms/Iterate/PushContainer/) component.

## Show the next item number in the button

You can use the `{nextItemNo}` variable in the `text` or `children` property to display the next item number.

```tsx
import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'

render(
  <Form.Handler>
    <Iterate.Array path="/myList">
      <Field.String itemPath="/" />
    </Iterate.Array>

    <Iterate.PushButton
      path="/myList"
      pushValue="push value"
      text="Add no. {nextItemNo}"
    />
  </Form.Handler>
)
```


## Demos

### Primitive items


```tsx
render(<Form.Handler>
        <Flex.Stack>
          <Iterate.Array path="/" animate>
            <Value.String itemPath="/" />
          </Iterate.Array>
          <Iterate.PushButton text="Add another item" path="/" pushValue="new" />
        </Flex.Stack>
      </Form.Handler>)
```


### Object items


```tsx
render(<Form.Handler data={[{
  name: 'Iron Man'
}, {
  name: 'Captain America'
}, {
  name: 'Thor'
}]} onChange={value => console.log('onChange', value)}>
        <Iterate.Array path="/" animate>
          <Field.Name.Last itemPath="/name" />
        </Iterate.Array>

        <Iterate.PushButton top="small" text="Add another item" path="/" pushValue={{}} />
      </Form.Handler>)
```

<!-- 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": {
    "path": {
      "doc": "The path to the array to add the new item to.",
      "type": "string",
      "status": "optional"
    },
    "itemPath": {
      "doc": "The path to the item in a nested array, to add the new item to.",
      "type": "string",
      "status": "optional"
    },
    "pushValue": {
      "doc": "The element to add to the array when the button is clicked. Can be a function that returns the push value.",
      "type": "unknown",
      "status": "required"
    },
    "[Button](/web/components/button/properties)": {
      "doc": "All button properties. A given `onClick` runs before the item is added, instead of replacing it. Return `false` from it to skip adding the item.",
      "type": "Various",
      "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)."
}
```