unstable_Toolbar API

Import

import { unstable_Toolbar as Toolbar } from "@stratakit/structures";
// OR
import * as Toolbar from "@stratakit/structures/unstable_Toolbar";

Toolbar.Group

Base element: <div>

A toolbar for grouping related interactive elements.

Follows the ARIA Toolbar pattern for reducing the number of tab stops.

Example:

<Toolbar.Group variant="solid">
  <Toolbar.Item render={…} />
  <Toolbar.Item render={…} />
  <Toolbar.Item render={…} />
</Toolbar.Group>

A divider can be displayed between items by rendering the Divider component.

<Toolbar.Group variant="solid">
  <Toolbar.Item render={…} />
  <Divider orientation="vertical" />
  <Toolbar.Item render={…} />
  <Toolbar.Item render={…} />
</Toolbar.Group>

variant

Type: "solid" (required)

Must be set to "solid" for now.

orientation

Type: "horizontal" | "vertical" | undefined (optional)

Default: "horizontal"

The orientation of the toolbar.

Additional props

• render

Toolbar.Item

Base element: <button>

An item within the toolbar. Should be used with the render prop.

If rendering an IconButton, be sure to append #icon-large to the icon URL.

Example:

<Toolbar.Item
  render={<IconButton variant="ghost" icon={`${placeholderIcon}#icon-large`} />}
/>

render

Type: (props: P) => React.ReactNode | React.ReactElement (required)

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

Check out the Composition guide for more details.