Form.SubmitButton#

Import#

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

Description#

Form.SubmitButton connects to the Form.Handler to submit the active state of the internal DataContext, triggering onSubmit.

The default button type is type="submit", ready to be used with the Form.Handler.

import { Form } from '@dnb/eufemia/extensions/forms'
render(
  <Form.Handler>
    <Form.ButtonRow>
      <Form.SubmitButton />
    </Form.ButtonRow>
  </Form.Handler>
)

Demos#

Standard text#

<Form.Handler
  data={{
    foo: 'bar',
  }}
  onSubmit={(data) => console.log('onSubmit', data)}
>
  <Form.SubmitButton />
</Form.Handler>

Send variant#

<Form.Handler
  data={{
    foo: 'bar',
  }}
  onSubmit={(data) => console.log('onSubmit', data)}
>
  <Form.SubmitButton variant="send" />
</Form.Handler>

With SubmitIndicator#

Example of showing the Form.SubmitIndicator with the property showSubmitIndicator set to true.

When using the submit button inside Form.Handler you can use an async onSubmit event handler to show a loading indicator when the form is submitting.

<Form.Handler>
  <Form.SubmitButton showIndicator />
</Form.Handler>