Components

Toolbar

A row of related controls with a single tab stop, moved through with the arrow keys.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Toolbar } from '@bigbang/ui';
Source: Toolbar.tsx
Storybook: Toolbar · Playground

Toolbar and its parts are in the @bigbang/ui package.

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

<Toolbar label="Text format">
  <ToolbarGroup label="Style">
    <ToolbarButton label="Bold" icon="bold" iconOnly pressed={bold} onClick={() => setBold(!bold)} />
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton label="Clear" />
</Toolbar>;

Props

labelRequired

Description: Name of the toolbar for screen readers, such as "Metin biçimi". Required: the toolbar has no visible title.
Type: string

orientation

Description: Layout of the buttons. Arrow keys follow it: left and right for horizontal, up and down for vertical.
Type: 'horizontal' | 'vertical'
Default: 'horizontal'

size

Description: Height of the toolbar frame: 32 or 36 px, the height of a small or medium input beside it. The buttons inside are 6 px shorter.
Type: 'sm' | 'md'
Default: 'md'

disabled

Description: Turns off every control in the toolbar.
Type: boolean
Default: false

material

Description: 'solid' keeps the toolbar solid under a glass Provider.
Type: 'auto' | 'solid'
Default: 'auto'

className

Description: For layout only: margins and placement.
Type: string

childrenRequired

Description: ToolbarButton, ToolbarGroup and ToolbarSeparator parts.
Type: ReactNode

ToolbarButton

labelRequired

Description: Visible label, or the accessible name when iconOnly is set.
Type: string

icon

Description: Registered icon name. Decorative; the label names the button.
Type: IconName

iconOnly

Description: Shows only the icon; the label becomes the accessible name. Needs icon.
Type: boolean
Default: false

pressed

Description: Makes the button a toggle: true or false sets aria-pressed. Leave it out for a plain action.
Type: boolean

onClick

Description: Runs the action, or flips pressed in your state.
Type: MouseEventHandler<HTMLButtonElement>

disabled

Description: Turns off the button. It stays in the arrow-key order so its place is announced.
Type: boolean
Default: false

ToolbarGroup

label

Description: Name of the group for screen readers, such as "Hizalama". With it the group is announced when focus enters it.
Type: string

childrenRequired

Description: The buttons of the group.
Type: ReactNode

ToolbarSeparator takes no props.

Data attributes

data-component="toolbar" and data-orientation: on the root.
data-component="toolbar-button", data-disabled, data-focusable: on the buttons (Base UI).