Skip to content
Home

Toolbar

Info
Demos
Properties
Events

Import

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

Description

Form.Section.Toolbar is a helper component to be used within the Form.Section.ViewContainer and the Form.Section.EditContainer.

Customize the Toolbar

You can customize the toolbar by either passing a function as a child or as a JSX element:

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


render(
  <Form.Section>
    <Form.Section.ViewContainer>
      View content
      <Form.Section.Toolbar>
        <Form.Section.ViewContainer.EditButton />
      </Form.Section.Toolbar>
    </Form.Section.ViewContainer>


    <Form.Section.EditContainer>
      Edit content
      <Form.Section.Toolbar>
        <Form.Section.EditContainer.DoneButton />
        <Form.Section.EditContainer.CancelButton />
      </Form.Section.Toolbar>
    </Form.Section.EditContainer>
  </Form.Section>,
)