Skip to content
Home

Buttons

Info
Demos
Properties

Import

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

Description

Wizard.Buttons is a combination of Wizard.PreviousButton and Wizard.NextButton for navigating between steps/pages.

Only the relevant button is shown, depending on the current step.

These two buttons are wrapped in a Form.ButtonRow component.

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


render(
  <Form.Handler>
    <Wizard.Container>
      <Wizard.Step title="Step 1">
        <Wizard.Buttons />
      </Wizard.Step>
    </Wizard.Container>
  </Form.Handler>,
)

But you can still use Form.ButtonRow to wrap a Form.SubmitButton as well:

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


render(
  <Form.Handler>
    <Wizard.Container>
      <Wizard.Step title="Step 1">
        <Form.ButtonRow>
          <Wizard.Buttons />
          <Form.SubmitButton />
        </Form.ButtonRow>
      </Wizard.Step>
    </Wizard.Container>
  </Form.Handler>,
)