Buttons

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>,
)

Demos

const Step = ({ title }) => {
  return (
    <Wizard.Step title={title}>
      <Form.Card>
        <P>Contents of {title}</P>
      </Form.Card>
      <Wizard.Buttons />
    </Wizard.Step>
  )
}
render(
  <Form.Handler>
    <Wizard.Container mode="loose">
      <Step title="Step 1" />
      <Step title="Step 2" />
      <Step title="Step 3" />
    </Wizard.Container>
  </Form.Handler>,
)