# Floating button group

> Floating canvas and viewport toolbar with gliding tool highlight, stepper zoom controls, and FilterBar morphing popover.

A floating toolbar capsule designed for canvas environments, interactive preview viewers, and overlay toolsets. Features backdrop blur, 1px quiet hairlines, a gliding active indicator, integrated zoom steppers, and an organic morphing options menu that grows directly from the chevron trigger.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/floating-button-group.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: `lucide-react`
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/floating-button-group
- Registry item (source): https://hairlineui.com/r/floating-button-group.json

## Usage

```tsx
import { FloatingButtonGroup } from "@/components/ui/floating-button-group";
import { MousePointer, Hand, Square, Type } from "lucide-react";

<FloatingButtonGroup
  dock="inline"
  tools={[
    { id: "select", label: "Select", icon: <MousePointer size={14} />, shortcut: "V" },
    { id: "hand", label: "Hand", icon: <Hand size={14} />, shortcut: "H" },
    { id: "frame", label: "Frame", icon: <Square size={14} />, shortcut: "F" },
    { id: "text", label: "Text", icon: <Type size={14} />, shortcut: "T" },
  ]}
  zoomValue={100}
  onZoomChange={(zoom) => console.log(zoom)}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tools` | `FloatingToolItem[]` | – | List of tools with id, label, icon, shortcut, and click handler. |
| `activeId` | `string` | – | Active tool identifier. |
| `onToolSelect` | `(id: string) => void` | – | Callback fired when a tool is chosen. |
| `zoomValue` | `number` | – | Optional zoom value percentage for stepper controls. |
| `menuItems` | `FloatingMenuItem[]` | – | Optional dropdown actions opened by chevron trigger. |
| `dock` | `"inline" \| "bottom" \| "top"` | `"inline"` | Positioning layout. |

## States

- **idle**: Resting glassmorphic pill with active tool highlighted.
- **hovered**: Gliding highlight tracks pointer across tools.
- **menuOpen**: Secondary options panel morphs out from under the chevron trigger.

## What it handles

Floating bars often suffer from harsh shadows, blurry popups, or poor mobile responsiveness. This component delivers glassmorphic elegance with pure 1px borders and organic popover transitions.

- **Gliding active indicator**: A quiet highlight glides underneath the active and hovered tool with UI easing.
- **Zoom & stepper controls**: Built-in stepper segment with hairline dividers and tabular numeric formatting.
- **FilterBar morphing menu**: Trailing chevron opens an options panel that physically grows out of the trigger button.
- **Keyboard shortcuts**: Displays hotkeys and handles full arrow-key and Escape accessibility.

## Replaces

clunky floating divs, generic shadcn toolbar dock, heavy modal popovers

## Where it fits

- **Canvas & design editors**: Figma-style bottom dock with tool selection (Select, Hand, Frame, Text).
- **Document & PDF viewers**: Floating overlay with zoom controls and export actions.
- **Interactive map / 3D viewer**: Persistent floating control bar anchored to bottom-center of viewport.

## Notes

- Uses backdrop-blur-md with 1px inset hairline border for modern glassmorphic look.
- Dropdown menu uses double-rAF expansion directly matched to FilterBar.

License: MIT (https://hairlineui.com/license#components)