@wordpress/components API

slotfill.jsx

import { createSlotFill, SlotFillProvider, Slot, Fill } from "@wordpress/components";

const Custom = createSlotFill("name");

<SlotFillProvider>
  <div id="slot">
    <Context.Provider>
      <Custom.Slot fillProps={{ a: "a" }}>
        {children => <div id="wrapper">{children}</div>}
      </Custom.Slot>
    </Context.Provider>
  </div>
  <div id="fill">
    <Custom.Fill>
      {/* It will not have access */}
      {fillProps => <span id={fillProps.a}>a</span>}
    </Custom.Fill>
  </div>
</SlotFillProvider>

Results in:
<div id="slot">
  <div id="wrapper">
    <span id="a">a</span>
  </div>
</div>
<div id="fill"></div>

Toolbar.jsx

import { Toolbar, ToolbarButton, ToolbarGroup } from "@wordpress/components";

<ToolbarButton onClick={...}>Label</ToolbarButton>
<ToolbarButton icon="icon" onClick={...}>Label</ToolbarButton>
<ToolbarButton>
  {props => <DropdownMenu toggleProps={props} />}
</ToolbarButton>


<ToolbarButton as={DropdownMenu} />
<ToolbarDropdownMenu />
<ToolbarIconButton />
<ToolbarButton>
  {props => <DropdownMenu toggleProps={props} />}
</ToolbarButton>

function MyToolbarButtons() {
  return (
    <Fragment>
      <ToolbarButton icon="cart" />
      <ToolbarButton icon="cart" />
      <ToolbarButton icon="cart" />
    </Fragment>
  );
}

function MyToolbar() {
  return (
    <Toolbar orientation="horizontal">
      <ToolbarGroup>
        <ToolbarButton icon="cart" />
      </ToolbarGroup>
      <ToolbarGroup isCollapsed>
        <MyToolbarButtons />
      </ToolbarGroup>
    </Toolbar>
  )
}

<ToolbarProvider>
  <ToolbarContainer>
    
  </ToolbarContainer>
</ToolbarProvider>