---
title: Wizard.NextButton
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.886Z
checksum: 0143c11d6196b5cb2a7cfa42877ced738da7ef47c26b37790689ff998a6dd50a
---

# Wizard.NextButton

## Import

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

## Description

`Wizard.NextButton` connects to `Wizard.Context` to move the user to the next step when clicked.

## Relevant links

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

**Note:** This button is used in [Wizard.Buttons](/web/forms/Wizard/Buttons/), which is easier to integrate into most wizards.

```jsx
import { Form, Wizard } from '@dnb/eufemia/extensions/forms'

render(
  <Form.Handler>
    <Wizard.Container>
      <Wizard.Step title="Step 1">
        <Wizard.NextButton />
      </Wizard.Step>
      <Wizard.Step title="Step 2">next step</Wizard.Step>
    </Wizard.Container>
  </Form.Handler>
)
```


## Demos


```tsx
render(<Wizard.Provider value={{
  activeIndex: 0,
  handlePrevious: () => null,
  handleNext: () => console.log('handleNext'),
  setActiveIndex: () => null,
  setFormError: () => null
}}>
      <ComponentBox>
        <Wizard.NextButton />
      </ComponentBox>
    </Wizard.Provider>)
```

<!-- 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": {
    "icon": {
      "doc": "The icon shown in the button. Defaults to `chevron_right`.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional"
    },
    "iconPosition": {
      "doc": "Position of the icon inside the button. Defaults to `right`.",
      "type": [
        "\"left\"",
        "\"right\"",
        "\"top\""
      ],
      "status": "optional"
    },
    "[Button](/web/components/button/properties)": {
      "doc": "All button properties, except `variant`. A given `onClick` runs before the wizard moves to the next step, instead of replacing it. Return `false` from it to stay on the current step.",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/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


```json
{
  "locales": [
    "da-DK",
    "en-GB",
    "nb-NO",
    "sv-SE"
  ],
  "entries": {
    "WizardNextButton.text": {
      "nb-NO": "Neste",
      "en-GB": "Next",
      "sv-SE": "Nästa",
      "da-DK": "Næste"
    }
  }
}
```