Toolbar

A row of buttons and controls, navigable with the arrow keys.

Preview

Loading Preview...

bun add xiod-ui

1import {2  Toolbar,3  ToolbarButton,4  ToolbarGroup,5  ToolbarInput,6  ToolbarLink,7  ToolbarSeparator8} from "xiod-ui/toolbar";

1<Toolbar>2  <ToolbarSeparator />3  <ToolbarGroup>4    <ToolbarButton />5  </ToolbarGroup>6</Toolbar>

Detailed documentation of properties and options.

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`disabled`	`boolean`	–	When `true` the item is disabled.
`loopFocus`

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	When `true` the item is disabled.
`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>`).

Accepts className, style and render, plus every native attribute of the element it renders.

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

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`defaultValue`	`string \| number \| readonly string[]`	–	The value the input starts with, when it isn't controlled.
`disabled`	`boolean`	`false`	When `true` the item is disabled.
`focusableWhenDisabled`	`boolean`	`true`	When `true` the item remains focusable when disabled.

Accepts className, style and render, plus every native attribute of the element it renders.

Accepts className, style and render, plus every native attribute of the element it renders.

Prop	Type	Default	Description
`orientation`	`"horizontal"`\|`"vertical"`	`'horizontal'`	The orientation of the separator. Defaults to the opposite of the toolbar's orientation, so a horizontal toolbar renders vertical separators.