Stalk UI

Component

Toolbar

Groups related controls in a single keyboard-navigable bar.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/toolbar

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Toolbar aria-label="Formatting">
  <Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
    <Toolbar.ToggleItem value="bold" aria-label="Bold">
      <Bold />
    </Toolbar.ToggleItem>
    <Toolbar.ToggleItem value="italic" aria-label="Italic">
      <Italic />
    </Toolbar.ToggleItem>
  </Toolbar.ToggleGroup>
  <Toolbar.Separator />
  <Toolbar.Button>Comment</Toolbar.Button>
  <Toolbar.Link href="#">Share</Toolbar.Link>
</Toolbar>
Theme
<Toolbar aria-label="Formatting">
  <Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
    <Toolbar.ToggleItem value="bold" aria-label="Bold" tooltip="Bold" shortcut="⌘B">
      <Bold />
    </Toolbar.ToggleItem>
    <Toolbar.ToggleItem value="italic" aria-label="Italic" tooltip="Italic" shortcut="⌘I">
      <Italic />
    </Toolbar.ToggleItem>
  </Toolbar.ToggleGroup>
  <Toolbar.Separator />
  <Toolbar.Button tooltip="Add a comment" shortcut="⌘⇧M">
    Comment
  </Toolbar.Button>
</Toolbar>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`tooltip``ReactNode \undefined`No-
`shortcut``string \string[] \undefined`No

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/toolbar.json`
  • Recipe: `toolbar`
  • Files: `src/components/ui/toolbar.tsx`