Toolbar

The example below loads live from Storybook; open it in Storybook to use the controls. Tab into the toolbar and move between its buttons with the arrow keys.

Live example, StorybookOpen in Storybook

Default

A toolbar collects related controls in one row. Buttons with pressed toggle; ToolbarGroup and ToolbarSeparator group them. label is required.

LightDark

Copy code

import { Provider, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [bold, setBold] = useState(true);
  const [italic, setItalic] = useState(false);
  const [align, setAlign] = useState('left');
  return (
    <Provider locale="en-GB">
      <Toolbar label="Text format">
        <ToolbarGroup label="Style">
          <ToolbarButton label="Bold" icon="bold" iconOnly pressed={bold} onClick={() => setBold(!bold)} />
          <ToolbarButton label="Italic" icon="italic" iconOnly pressed={italic} onClick={() => setItalic(!italic)} />
        </ToolbarGroup>
        <ToolbarSeparator />
        <ToolbarGroup label="Alignment">
          <ToolbarButton label="Align left" icon="align-left" iconOnly pressed={align === 'left'} onClick={() => setAlign('left')} />
          <ToolbarButton label="Align centre" icon="align-center" iconOnly pressed={align === 'center'} onClick={() => setAlign('center')} />
          <ToolbarButton label="Align right" icon="align-right" iconOnly pressed={align === 'right'} onClick={() => setAlign('right')} />
        </ToolbarGroup>
      </Toolbar>
    </Provider>
  );
}

Labelled buttons

Without iconOnly a button shows a visible label next to its icon.

FilterRefresh

Download

LightDark

Copy code

import { Provider, Toolbar, ToolbarButton, ToolbarSeparator } from '@bigbang/ui';

export default function WithLabels() {
  return (
    <Provider locale="en-GB">
      <Toolbar label="View">
        <ToolbarButton label="Filter" icon="filter" />
        <ToolbarButton label="Refresh" icon="refresh" />
        <ToolbarSeparator />
        <ToolbarButton label="Download" icon="download" />
      </Toolbar>
    </Provider>
  );
}

Vertical

orientation="vertical" stacks the buttons; the arrow keys become up and down.

LightDark

Copy code

import { Provider, Toolbar, ToolbarButton, ToolbarSeparator } from '@bigbang/ui';

export default function Vertical() {
  return (
    <Provider locale="en-GB">
      <Toolbar label="View" orientation="vertical">
        <ToolbarButton label="Zoom in" icon="plus" iconOnly />
        <ToolbarButton label="Zoom out" icon="minus" iconOnly />
        <ToolbarSeparator />
        <ToolbarButton label="Refresh" icon="refresh" iconOnly />
      </Toolbar>
    </Provider>
  );
}

Disabled

A disabled button stays in the arrow-key order but does not run. Pass disabled to the toolbar to turn off all of it.

CopyDelete

LightDark

Copy code

import { Provider, Toolbar, ToolbarButton } from '@bigbang/ui';

export default function Disabled() {
  return (
    <Provider locale="en-GB">
      <Toolbar label="View">
        <ToolbarButton label="Copy" icon="copy" />
        <ToolbarButton label="Delete" icon="trash" disabled />
      </Toolbar>
    </Provider>
  );
}

Light and dark mode

Colours come from semantic tokens; neither mode needs extra settings.

Light

Dark

Copy code

import { Provider, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [bold, setBold] = useState(true);
  const [italic, setItalic] = useState(false);
  const [align, setAlign] = useState('left');
  return (
    <Provider locale="en-GB">
      <Toolbar label="Text format">
        <ToolbarGroup label="Style">
          <ToolbarButton label="Bold" icon="bold" iconOnly pressed={bold} onClick={() => setBold(!bold)} />
          <ToolbarButton label="Italic" icon="italic" iconOnly pressed={italic} onClick={() => setItalic(!italic)} />
        </ToolbarGroup>
        <ToolbarSeparator />
        <ToolbarGroup label="Alignment">
          <ToolbarButton label="Align left" icon="align-left" iconOnly pressed={align === 'left'} onClick={() => setAlign('left')} />
          <ToolbarButton label="Align centre" icon="align-center" iconOnly pressed={align === 'center'} onClick={() => setAlign('center')} />
          <ToolbarButton label="Align right" icon="align-right" iconOnly pressed={align === 'right'} onClick={() => setAlign('right')} />
        </ToolbarGroup>
      </Toolbar>
    </Provider>
  );
}