Toolbar

Basic toolbar example demonstrating core behavior.

Package: @solidiom/toolbar
Version: 0.0.1-next.0
Status: stable

Examples

import * as Toolbar from "@solidiom/toolbar"
import { createSignal } from "solid-js"

const [bold, setBold] = createSignal(false)
const [italic, setItalic] = createSignal(false)

;<Toolbar.Root orientation="horizontal">
  <Toolbar.Button onClick={() => console.log("Undo")}>Undo</Toolbar.Button>
  <Toolbar.Button onClick={() => console.log("Redo")}>Redo</Toolbar.Button>

  <Toolbar.Separator />

  <Toolbar.ToggleGroup>
    <Toolbar.ToggleItem pressed={bold()} onPressedChange={setBold}>
      Bold
    </Toolbar.ToggleItem>
    <Toolbar.ToggleItem pressed={italic()} onPressedChange={setItalic}>
      Italic
    </Toolbar.ToggleItem>
  </Toolbar.ToggleGroup>

  <Toolbar.Separator />

  <Toolbar.Button disabled>Export</Toolbar.Button>
</Toolbar.Root>

The toolbar provides role="toolbar" and groups actions. Use Button for simple actions, Separator for visual grouping, and ToggleGroup/ToggleItem for stateful tools.

View source

        export function Root(props: ToolbarRootProps) {
  const orientation = () => props.orientation ?? "horizontal"
  return (
    <div
      role="toolbar"
      aria-orientation={orientation()}
      class={props.class}
      style={props.style}
      {...applySemanticAttrs({ scope: "toolbar", part: "root", orientation: orientation() })}
    >
      {props.children}
    </div>
  )
}