LayoutReact

Toolbar

A container for grouping a set of buttons and controls.

Rendered by React 19.3.1

import * as React from 'react'
import { Toolbar } from '@hamur/react/toolbar'

export default function ToolbarExample() {
  const [last, setLast] = React.useState('nothing yet')
  return (
    <div className="stack">
      <Toolbar.Root className="toolbar" aria-label="Formatting">
        <Toolbar.Group className="toolbar-group" aria-label="Text style">
          <Toolbar.Button
            className="toolbar-button"
            onClick={() => setLast('Bold')}
          >
            Bold
          </Toolbar.Button>
          <Toolbar.Button
            className="toolbar-button"
            onClick={() => setLast('Italic')}
          >
            Italic
          </Toolbar.Button>
        </Toolbar.Group>
        <Toolbar.Separator className="toolbar-separator" />
        <Toolbar.Button
          className="toolbar-button"
          disabled
          onClick={() => setLast('Strike')}
        >
          Strike
        </Toolbar.Button>
        <Toolbar.Separator className="toolbar-separator" />
        <Toolbar.Input
          className="input toolbar-input"
          aria-label="Font size"
          defaultValue="14"
        />
        <Toolbar.Link className="toolbar-link" href="#toolbar">
          Edited 51m ago
        </Toolbar.Link>
      </Toolbar.Root>
      <p className="muted">Last pressed: {last}</p>
    </div>
  )
}

284Tests passing in React · 0 failing

9.2 KiBSize

Not measured yetMemory

Not measured yetSpeed

productdevbook and 11 upstream authors8 commits · last Nov 4

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<Toolbar.Root>
  <Toolbar.Group>
    <Toolbar.Button />
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Input />
  <Toolbar.Link />
</Toolbar.Root>

Examples

The demo at the top is the one example this component has so far.

API reference

11 props across 6 parts, in React syntax. className, style, render are listed once, under Shared props.

Button`Toolbar.Button`

A button that can be used as-is or as a trigger for other components. Renders a <button>.

Button props
Prop	Type	Default
`focusableWhenDisabled`When `true` the item remains focusable when disabled.	`boolean`	`true`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`true`
`disabled`When `true` the item is disabled.	`boolean`	`false`

Button data attributes
Data attribute	Description
`data-disabled`	Present when the button is disabled.
`data-orientation`	Indicates the orientation of the toolbar.
`data-focusable`	Present when the button remains focusable when disabled.

Group`Toolbar.Group`

Groups several toolbar items or toggles. Renders a <div>.

Group props
Prop	Type	Default
`disabled`When `true` all toolbar items in the group are disabled.	`boolean`	`false`

Group data attributes
Data attribute	Description
`data-disabled`	Present when the group is disabled.
`data-orientation`	Indicates the orientation of the toolbar.

Input`Toolbar.Input`

A native input element that integrates with Toolbar keyboard navigation. Renders an <input>.

Input props
Prop	Type	Default
`defaultValue`	`string \| number \| readonly string[]`	`—`
`focusableWhenDisabled`When `true` the item remains focusable when disabled.	`boolean`	`true`
`disabled`When `true` the item is disabled.	`boolean`	`false`

Input data attributes
Data attribute	Description
`data-disabled`	Present when the input is disabled.
`data-orientation`	Indicates the orientation of the toolbar.
`data-focusable`	Present when the input remains focusable when disabled.

Link`Toolbar.Link`

A link component. Renders an <a>.

Link data attributes
Data attribute	Description
`data-orientation`	Indicates the orientation of the toolbar.

Root`Toolbar.Root`

A container for grouping a set of controls, such as buttons, toggle groups, or menus. Renders a <div>.

Root props
Prop	Type	Default
`loopFocus`If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.	`boolean`	`true`
`disabled`	`boolean`	`—`
`orientation`The orientation of the toolbar.	`Orientation`	`'horizontal'`

Root data attributes
Data attribute	Description
`data-disabled`	Present when the toolbar is disabled.
`data-orientation`	Indicates the orientation of the toolbar.

Separator`Toolbar.Separator`

A separator element accessible to screen readers. Renders a <div>.

Separator props
Prop	Type	Default
`orientation`The orientation of the separator.	`Orientation`	`—`

Separator data attributes
Data attribute	Description
`data-orientation`	Indicates the orientation of the separator, which is perpendicular to the toolbar.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Keyboard
Keys	Does	Part
`ArrowRightArrowLeft`	Moves focus to the next or previous item (`ArrowDown` and `ArrowUp` when vertical; reversed in right-to-left)	Root
`ArrowRight`	Stops at the last item while `loopFocus` is off	Root
`Enter`	Activates a Button, also when it renders an element other than `<button>`	Button

Accessibility

What the parts set
Part	Sets	So that
Root	`role="toolbar"`, `aria-orientation`	a screen reader announces a toolbar and which arrow keys move in it
Group	`role="group"`	related items are read as a set; name it with `aria-label`
Separator	`role="separator"`, with the opposite `orientation` to Root	the break between groups is announced
Button	stays focusable while disabled, since `focusableWhenDisabled` is on by default	arrow keys keep a steady path through the toolbar
Input	`focusableWhenDisabled` is on by default too	a disabled input keeps its place in the arrow-key order

Focus order

The toolbar is one tab stop.
Arrow keys move through Button, Link and Input items and through other components' triggers placed in it; with loopFocus they wrap at the ends.
Use one Input at most, as the last item: in a horizontal toolbar, the left and right arrows also move the text cursor.