Components

Toolbar

A row of controls with roving focus between them.

Usage

Basic

HTML

<bs:bsui-toolbar>
  <bs:bsui-toolbar-button label="Undo" />
  <bs:bsui-toolbar-button label="Redo" />
  <bs:bsui-toolbar-separator />
  <bs:bsui-toolbar-button label="Publish" />
</bs:bsui-toolbar>

Formatting bar

A toolbar also takes toggle groups and selects, not only buttons.

HTML

<bs:bsui-toolbar>
  <bs:bsui-toggle-group defaultValue="left">
    <bs:bsui-toggle-group-item value="left" label="Left" />
    <bs:bsui-toggle-group-item value="center" label="Center" />
    <bs:bsui-toggle-group-item value="right" label="Right" />
  </bs:bsui-toggle-group>
  <bs:bsui-toolbar-separator />
  <bs:bsui-select placeholder="Font" defaultValue="inter">
    <bs:bsui-select-trigger />
    <bs:bsui-select-popup>
      <bs:bsui-select-option value="inter" label="Inter" />
      <bs:bsui-select-option value="public-sans" label="Public Sans" />
    </bs:bsui-select-popup>
  </bs:bsui-select>
  <bs:bsui-toolbar-separator />
  <bs:bsui-toolbar-button label="B" />
  <bs:bsui-toolbar-button label="I" />
</bs:bsui-toolbar>

Disabled action

A disabled button keeps its place and stops answering clicks and arrow keys.

HTML

<bs:bsui-toolbar>
  <bs:bsui-toolbar-button label="Undo" />
  <bs:bsui-toolbar-button label="Redo" disabled="true" />
  <bs:bsui-toolbar-separator />
  <bs:bsui-toolbar-button label="Publish" />
</bs:bsui-toolbar>

Anatomy

Toolbar is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/toolbar
bsui/toolbar-button
bsui/toolbar-separator

Attributes

Attribute	Type	Default
`orientation`	`horizontal` `vertical`	`horizontal`

`bsui/toolbar-button`

Attribute	Type	Default
`label`	`richtext`	—
`disabled`	`toggle`	`false`

`bsui/toolbar-separator`

This block takes no attributes.