Components

Toolbar

A row of controls under one tab stop

Import

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

Groups related buttons, toggles, and popup triggers, such as the panel toggles above a view.

Usage

Toolbar.Button renders a Button. Pass a Button, Toggle, or popup trigger to render.
Arrow keys skip a disabled item. A Button with disabledReason stays reachable and shows the reason as its title.

Anatomy

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

Examples

A group, a separator, and two buttons

<Toolbar.Root aria-label="Layout">
  <Toolbar.Group aria-label="Panels">
    <Toolbar.Button
      render={<Toggle iconOnly icon="panel-left" aria-label="Sidebar" defaultPressed />}
    />
    <Toolbar.Button render={<Toggle iconOnly icon="console" aria-label="Terminal" />} />
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Button render={<Button iconOnly icon="refresh" aria-label="Refresh" />} />
  <Toolbar.Button render={<Button iconOnly icon="trash" aria-label="Delete" />} />
</Toolbar.Root>

import { Button } from "@nyte-ai/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@nyte-ai/ui/tooltip";

<Toolbar.Root aria-label="Changes">
  <Tooltip>
    <TooltipTrigger
      render={
        <Toolbar.Button
          render={<Button iconOnly icon="refresh" aria-label="Refresh" title={undefined} />}
        />
      }
    />
    <TooltipContent>Refresh</TooltipContent>
  </Tooltip>
</Toolbar.Root>;

Props

Toolbar.Root, Toolbar.Group, and Toolbar.Separator take xstyle, and className and style as plain values. Toolbar.Button passes className and style to what it renders.

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.

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.

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 orientation and lands on data-orientation for every part.
A disabled item gets data-disabled. A disabled Button with disabledReason gets aria-disabled in place of the native disabled attribute.