Components

Toolbar

A container that groups buttons and controls under one tab stop

import { Toolbar } from "@nyte-ai/ui/toolbar";

Groups a set of controls and moves focus between them with the arrow keys, so the whole toolbar is one stop in the tab order. No Nyte styling here.

Usage

Arrow keys move focus inside a toolbar. Inside a Toolbar.Input they move the text cursor first, and move focus once the cursor sits at the end of the text.
Toolbar items stay focusable while disabled by default, which keeps the arrow key order stable. Pass focusableWhenDisabled={false} to drop an item out of it.
A popup trigger goes through Toolbar.Button with render, so the item stays part of the toolbar.
Toolbar.Separator defaults to the opposite orientation of the toolbar.

Anatomy

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

Examples

A group, a separator, and two buttons

<Toolbar.Root aria-label="Formatting">
  <Toolbar.Group aria-label="Text style">
    <Toolbar.Button render={<Toggle defaultPressed />} aria-label="Bold">
      <IconBold size={14} />
    </Toolbar.Button>
    <Toolbar.Button render={<Toggle />} aria-label="Italic">
      <IconItalic size={14} />
    </Toolbar.Button>
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Button aria-label="Undo">
    <IconArrowUndoUp size={14} />
  </Toolbar.Button>
  <Toolbar.Button disabled aria-label="Delete">
    <IconTrashCanSimple size={14} />
  </Toolbar.Button>
</Toolbar.Root>

Pass the trigger to Toolbar.Button with render. The same shape works for Alert dialog, Dialog, Menu, Popover, and Select.

<Toolbar.Root>
  <Menu.Root>
    <Toolbar.Button render={<Menu.Trigger />} />
    <Menu.Portal>{/* Compose the rest of the menu */}</Menu.Portal>
  </Menu.Root>
</Toolbar.Root>

A tooltip goes the other way around. The toolbar item is passed to Tooltip.Trigger.

<Toolbar.Root>
  <Tooltip.Root>
    <Tooltip.Trigger render={<Toolbar.Button />} />
    <Tooltip.Portal>{/* Compose the rest of the tooltip */}</Tooltip.Portal>
  </Tooltip.Root>
</Toolbar.Root>

With a number field

Pass NumberField.Input to Toolbar.Input with render.

<Toolbar.Root>
  <NumberField.Root>
    <NumberField.Group>
      <NumberField.Decrement />
      <Toolbar.Input render={<NumberField.Input />} />
      <NumberField.Increment />
    </NumberField.Group>
  </NumberField.Root>
</Toolbar.Root>

Props

The reference tables below come from Base UI, MIT, © Material-UI SAS.

Root

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

Root Props:

Prop	Type	Default	Description
loopFocus	`boolean`	`true`	If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
disabled	`boolean`	-	-
orientation	`Toolbar.Root.Orientation`	`'horizontal'`	The orientation of the toolbar.
className	`string \| ((state: Toolbar.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Toolbar.Root.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Toolbar.Root.State) => ReactElement)`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Root Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the toolbar.
data-disabled	-	Present when the toolbar is disabled.

Button

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

Button Props:

Prop	Type	Default	Description
focusableWhenDisabled	`boolean`	`true`	When `true` the item remains focusable when disabled.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
disabled	`boolean`	`false`	When `true` the item is disabled.
className	`string \| ((state: Toolbar.Button.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Toolbar.Button.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Toolbar.Button.State) => ReactElement)`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Button Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the toolbar.
data-disabled	-	Present when the button is disabled.
data-focusable	-	Present when the button remains focusable when disabled.

Link

A link component. Renders an <a> element.

Link Props:

Prop	Type	Default	Description
className	`string \| ((state: Toolbar.Link.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Toolbar.Link.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, state: Toolbar.Link.State) => ReactElement)`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Link Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the toolbar.

Separator

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

Separator Props:

Prop	Type	Default	Description
orientation	`Orientation`	-	The orientation of the separator. Defaults to the opposite of the toolbar's orientation, so a horizontal toolbar renders vertical separators.
className	`string \| ((state: Toolbar.Separator.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Toolbar.Separator.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Toolbar.Separator.State) => ReactElement)`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Separator Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the separator, which is perpendicular to the toolbar.

Group

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

Group Props:

Prop	Type	Default	Description
disabled	`boolean`	`false`	When `true` all toolbar items in the group are disabled.
className	`string \| ((state: Toolbar.Group.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Toolbar.Group.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Toolbar.Group.State) => ReactElement)`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Group Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the toolbar.
data-disabled	-	Present when the group is disabled.

Input

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

Input Props:

Prop	Type	Default	Description
defaultValue	`string \| number \| string[]`	-	-
focusableWhenDisabled	`boolean`	`true`	When `true` the item remains focusable when disabled.
disabled	`boolean`	`false`	When `true` the item is disabled.
className	`string \| ((state: Toolbar.Input.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Toolbar.Input.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Toolbar.Input.State) => ReactElement)`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Input Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the toolbar.
data-disabled	-	Present when the input is disabled.
data-focusable	-	Present when the input remains focusable when disabled.

Accessibility

Toolbar.Root renders role="toolbar". Label it with aria-label or aria-labelledby.
Arrow keys move focus between items. Focus wraps at the end unless you pass loopFocus={false}.
Orientation follows the orientation prop and lands on data-orientation for every part.
A disabled item gets data-disabled, and data-focusable while it remains reachable by arrow key.