Slot and fill suggestion

slot-and-fill.js

const LayoutToolbarButtonsSlot = () => (<>
  <Slot id="layout-toolbar-buttons" multi />
  <Fill slot="layout-toolbar-buttons" weight={100}>
    <ExportButton />
  </Fill>
  <Fill slot="layout-toolbar-buttons" weight={200}>
    <DocumentationButton documentationURL={documentationURL} />
  </Fill>
</>);

const FillLayoutToolbarButtonsWithDefaults = () => (
  <>
    <Fill slot="layout-toolbar-buttons" weight={100}>
      <ExportButton />
    </Fill>
    <Fill slot="layout-toolbar-buttons" weight={200}>
      <DocumentationButton documentationURL={documentationURL} />
    </Fill>
  </>
);

const FillSlotWithDefaults = ({ slotId, fills }) => (
  <>
    {fills.map(fill => <Fill slot="layout-toolbar-buttons" weight={100}>{fill}</Fill>)}
  </>
);

<div><LayoutToolbarButtonsSlot /></div>

<Slot id="layout-toolbar-buttons" multi />
<FillSlotWithDefaults slotId="layout-toolbar-buttons" fills={
  <>
    <ExportButton />
    <DocumentationButton documentationURL={documentationURL} />
  </>
} />


<Slot id="layout-toolbar-buttons" multi>
  <ExportButton />
  <DocumentationButton documentationURL={documentationURL} />
</Slot>