Toolbar

A group of buttons that arrow keys move between.

Import

Copy code

import { Toolbar } from '@k8ordo/ui';

Usage

It takes one Tab stop; arrow keys move inside (Home / End to the ends, skipping disabled items), and coming back lands on the item last focused. Each item spreads the ref / tabIndex / onFocus that Toolbar.Item’s renderItem passes onto a Button or an IconButton.

tsx

Copy code

<Toolbar.Root aria-label="Formatting">
  <Toolbar.Item
    renderItem={(props) => (
      <IconButton {...props} label="Copy">
        <CopyIcon size="sm" />
      </IconButton>
    )}
  />
  <Toolbar.Item
    renderItem={(props) => (
      <IconButton
        {...props}
        aria-pressed={isList}
        label="Bulleted list"
        onClick={toggleList}
      >
        <ListIcon size="sm" />
      </IconButton>
    )}
  />
  <Toolbar.Separator />
  <Toolbar.Item
    renderItem={(props) => (
      <Button {...props} size="sm">
        Save
      </Button>
    )}
  />
</Toolbar.Root>

Toggles

Pass the pressed state as aria-pressed; the toolbar shades a pressed item.

Vertical

tsx

Copy code

<Toolbar.Root aria-label="Formatting" orientation="vertical">
  {/* … */}
</Toolbar.Root>

Props

Toolbar.Root

children?: Type: ReactNode; Default: -
orientation?: Type: 'horizontal'|'vertical'; Default: 'horizontal'
ref?: Type: Ref<HTMLDivElement>; Default: -

Prop	Type	Default
`children?`	`ReactNode`	-
`orientation?`	`'horizontal'`\|`'vertical'`	`'horizontal'`
`ref?`	`Ref<HTMLDivElement>`	-

Type base (some attrs are managed internally): HTMLAttributes<HTMLDivElement>

Toolbar.Item

renderItem: Type: (props: ToolbarItemProps) => ReactElement; Default: -

Prop	Type	Default
`renderItem`	`(props: ToolbarItemProps) => ReactElement`	-