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.

Use the IconButton component for actions. Use the ToggleButton component to toggle between two state.

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

Example:

<Toolbar.Item
  render={
    <IconButton label="…">
      <Icon href={`${placeholderIcon}#icon-large`} size="large" />
    </IconButton>
   }
/>

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.