Toolbar

When to use

Toolbar collects frequent controls that act on one area in a row: text formatting, view controls, editor actions. Keyboard users enter it with one Tab and move with the arrow keys, so a row of many buttons does not lengthen the tab order.

When not to use

• For the page’s main actions: Use Buttons in PageHeader.
• For bulk actions on selected rows: Use ActionBar.
• For two or three independent buttons: ButtonGroup is enough.
• For a single-choice view switch: Use SegmentedControl.

Anatomy

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>
  );
}

1. Container: toolbar role and the required label name; raised surface and thin border.
2. Group: Related buttons; it can have a name.
3. Button: An action or a toggle with pressed; with icon, label or icon only.
4. Separator: A thin line between groups.

Behaviour

• Tab enters the toolbar and returns to the last focused button. A second Tab leaves it.
• Arrow keys move between buttons and wrap at the end. Disabled buttons are focused too and announced, but they do not run.
• A button with pressed gets a selected fill while pressed; the colour change is smooth. A pressed button scales down slightly.
• On a narrow screen a horizontal toolbar does not wrap; it scrolls sideways.

Guidelines

• Group buttons by purpose and put a separator between groups.
• Use common icons on icon-only buttons; show a label when the meaning is unclear.
• Keep a toolbar under ten buttons.
• In single-choice groups (such as alignment) only one button is pressed.

Content

• Labels are short verbs or format names.
• label says what the toolbar acts on: “Text format”, “View”.

Turkish	English
Metin biçimi	Text format
Kalın	Bold
İtalik	Italic
Sola hizala	Align left
Ortala	Align centre

Glass

Under a Provider material="glass", the toolbar turns glass. material="solid" keeps it solid.

Related components

• ButtonGroup: A few related buttons, each a tab stop.
• ToggleGroup: A group of settings that stay on or off.
• SplitButton: A main action and its variants.