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

Demos

Using ViewContainer and EditContainer

View content
Code Editor
<Form.Section>
  <Form.Section.ViewContainer>
    View content
    <Form.Section.Toolbar>
      <Button variant="tertiary">Your Tool</Button>
      <Form.Section.ViewContainer.EditButton />
    </Form.Section.Toolbar>
  </Form.Section.ViewContainer>

  <Form.Section.EditContainer>
    Edit content
    <Form.Section.Toolbar>
      <Button variant="tertiary">Your Tool</Button>
      <Form.Section.EditContainer.DoneButton />
      <Form.Section.EditContainer.CancelButton />
    </Form.Section.Toolbar>
  </Form.Section.EditContainer>
</Form.Section>