Plugin SDK > Toolbar

<Canvas ctx={ctx}>
  <Toolbar>
    <ToolbarButton>
      <BackIcon />
    </ToolbarButton>
    <ToolbarStack stackSize="l">
      <ToolbarTitle>Media Area</ToolbarTitle>
      <div style={{ flex: '1' }} />
      <Button buttonType="primary">Action</Button>
    </ToolbarStack>
    <ToolbarButton>
      <SidebarLeftArrowIcon />
    </ToolbarButton>
  </Toolbar>
  <div
    style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      background: 'var(--light-bg-color)',
      height: '150px',
    }}
  >
    Main content
  </div>
</Canvas>

<Canvas ctx={ctx}>
  <Toolbar>
    <ToolbarStack stackSize="l">
      <ToolbarTitle>Media Area</ToolbarTitle>
      <div style={{ flex: '1' }} />
      <ButtonGroup>
        <ButtonGroupButton>First</ButtonGroupButton>
        <ButtonGroupButton selected>Second</ButtonGroupButton>
        <ButtonGroupButton>Third</ButtonGroupButton>
      </ButtonGroup>
    </ToolbarStack>
  </Toolbar>
  <div
    style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      background: 'var(--light-bg-color)',
      height: '150px',
    }}
  >
    Main content
  </div>
</Canvas>