Vuer UIKit | FortyFive Labs

Simple, composable toolbar components for organizing buttons and actions.

Complex Example

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

  return (
    <Toolbar size="md">
      <ToolbarGroup>
        <ToggleButtons value={selectedTool} onValueChange={setSelectedTool} padding={false} variant="primary">
          <Tooltip>
            <TooltipTrigger asChild>
              <ToggleButton icon value="select" >
                <MouseCursorAltIcon strokWidth={0.5} size="md"/>
              </ToggleButton>
            </TooltipTrigger>
            <TooltipContent>Select tool</TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <ToggleButton value="edit" icon >
                <MouseCursorIcon strokWidth={0.5}/>
              </ToggleButton>
            </TooltipTrigger>
            <TooltipContent>Edit tool</TooltipContent>
          </Tooltip>
        </ToggleButtons>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button icon variant="ghost">
              <Scissors className="size-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Cut</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button icon variant="ghost">
              <Hand className="size-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Hand tool</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              icon
              size="md"
            >
              <Hash/>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Hash tool</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              icon
              size="md"
              onClick={() => toast("Type tool selected")}
            >
              <Type/>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Type tool</TooltipContent>
        </Tooltip>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarGroup>
        <Button
          variant="primary"
          size="md"
          onClick={() => toast("Add item clicked")}
        >
          <Plus/> Add
        </Button>
      </ToolbarGroup>
    </Toolbar>
  )

Examples

<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

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

Sizes

{/* 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

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
}