Toolbar

Groups buttons and toggles, like a text editor toolbar.

Toolbar.tsx

import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem
} from 'alinea/components'
import {
  IcRoundFormatBold,
  IcRoundFormatItalic,
  IcRoundLink,
  IcRoundRedo,
  IcRoundUndo
} from 'alinea/dashboard/icons'

export function ToolbarExample() {
  return (
    <Toolbar aria-label="Text formatting">
      <ToolbarGroup>
        <ToolbarButton size="icon" icon={IcRoundUndo} aria-label="Undo" />
        <ToolbarButton size="icon" icon={IcRoundRedo} aria-label="Redo" />
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarToggleGroup
        type="multiple"
        defaultValue={['bold']}
        aria-label="Marks"
      >
        <ToolbarToggleItem
          value="bold"
          icon={IcRoundFormatBold}
          aria-label="Bold"
        />
        <ToolbarToggleItem
          value="italic"
          icon={IcRoundFormatItalic}
          aria-label="Italic"
        />
      </ToolbarToggleGroup>
      <ToolbarSeparator />
      <ToolbarButton size="icon" icon={IcRoundLink} aria-label="Link" />
    </Toolbar>
  )
}

Props

`<Toolbar>`

A container for a set of controls, navigable with the arrow keys

PropTypeDefaultDescription

orientationOrientationDefault 'horizontal'

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ToolbarGroup>`

Groups related controls within a toolbar

PropTypeDefaultDescription

childrenReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ToolbarButton>`

A button within a toolbar, a ghost Button by default

Accepts every prop of Button.

`<ToolbarToggleGroup>`

PropTypeDefaultDescription

type*'single' | 'multiple'Default –

valuestring | Array<string>Default –The pressed item, an empty string when none is pressed

defaultValuestring | Array<string>Default –

onValueChange((value: string) => void) | ((value: Array<string>) => void)Default –

variant'default' | 'outline'Default –

size'default' | 'sm' | 'lg'Default –

disabledbooleanDefault –

orientationOrientationDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ToolbarToggleItem>`

PropTypeDefaultDescription

value*stringDefault –

iconIconType | ReactElementDefault –

disabledbooleanDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ToolbarSeparator>`

Accepts className and style.