Toolbar

Preview

Installation

npx shadcn@latest add @cubby-ui/toolbar

Usage

import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarGroup,
} from "@/components/ui/cubby-ui/toolbar"

<Toolbar>
  <ToolbarGroup>
    <ToolbarButton />
  </ToolbarGroup>
  <ToolbarSeparator />
</Toolbar>

Examples

With Input

Include input fields within the toolbar.

API Reference

The Toolbar component is built on top of Base UI's Toolbar. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Toolbar documentation.

Modified Defaults

Our implementation changes the following Base UI prop defaults on ToolbarButton:

• variant: defaults to "ghost" (Base UI Button defaults to "solid")
• size: defaults to "default" (standard Base UI default, but made explicit with buttonVariants)