gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/menu-tool-layouts/toolbar.md

1. Home
2. Menu Tool Layouts
3. Toolbar

Toolbar

Simple, composable toolbar components for organizing buttons and actions.

Complex Example

Add ```jsx const [selectedTool, setSelectedTool] = useState("select");

return ( Select tool Edit tool Cut Hand tool Hash tool <Button variant="ghost" icon size="md" onClick={() => toast("Type tool selected")} > Type tool <Button variant="primary" size="md" onClick={() => toast("Add item clicked")} > Add )

## Examples

Add ```jsx
<Toolbar>
  <ToolbarGroup>
    <Button variant="ghost" icon>
      <Hash/>
    </Button>
    <Button variant="ghost" icon>
      <Type/>
    </Button>
    <Button variant="ghost" icon>
      <Image/>
    </Button>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarGroup>
    <Button variant="primary">
      <Plus/> Add
    </Button>
  </ToolbarGroup>
</Toolbar>

Components

• Toolbar - Main container with variant support (default | floating)
• ToolbarGroup - Groups related buttons with gap spacing
• Button - Button component with toolbar-specific styling
• ToolbarSeparator - Short rounded visual separator

Floating Variant

Add ```jsx Add

## Sizes

```jsx
{/* Small toolbar - compact padding */}
<Toolbar size="sm">
  <ToolbarGroup>
    <Button variant="ghost" icon size="sm"><Hash /></Button>
    <Button variant="ghost" icon size="sm"><Type /></Button>
  </ToolbarGroup>
</Toolbar>

{/* Medium toolbar - default */}
<Toolbar size="md">
  <ToolbarGroup>
    <Button variant="ghost" icon size="md"><Hash /></Button>
    <Button variant="ghost" icon size="md"><Type /></Button>
  </ToolbarGroup>
</Toolbar>

{/* Large toolbar - spacious padding */}
<Toolbar size="lg">
  <ToolbarGroup>
    <Button variant="ghost" icon size="lg"><Hash /></Button>
    <Button variant="ghost" icon size="lg"><Type /></Button>
  </ToolbarGroup>
</Toolbar>

API Reference

Toolbar

interface ToolbarProps {
  className?: string
  children?: React.ReactNode
  variant?: "default" | "floating"
  size?: "sm" | "md" | "lg"
}

Button

interface ButtonProps {
  variant?: "primary" | "secondary" | "destructive" | "ghost" | "link"
  size?: "sm" | "md" | "lg"
  icon?: boolean
  className?: string
  children: React.ReactNode
  onClick?: () => void
  disabled?: boolean
  tooltip?: string
}