# Expanding button group

> Compact icon toolbar where the hovered or focused action grows to reveal its label while neighbours slide aside, with in-place confirmation.

An interactive toolbar designed for high-density action surfaces. Resting as a minimal row of icon buttons inside a calm hairline capsule, pointing at or focusing any icon smoothly expands its text label using CSS grid layout transitions, neighbours slide aside with organic easing, and actions can confirm in place upon execution.

## Install

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

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

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

## Usage

```tsx
import { ExpandingButtonGroup } from "@/components/ui/expanding-button-group";
import { Download, Link2, Trash2 } from "lucide-react";

<ExpandingButtonGroup
  items={[
    { id: "download", label: "Download", icon: <Download size={14} />, confirmLabel: "Downloaded!" },
    { id: "link", label: "Copy link", icon: <Link2 size={14} />, confirmLabel: "Copied!" },
    { id: "delete", label: "Delete", icon: <Trash2 size={14} />, tone: "danger" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `ExpandingButtonItem[]` | – | Array of actions with id, label, icon, tone, and confirmLabel. |
| `defaultExpandedId` | `string \| null` | `null` | Item id to show expanded by default. |
| `size` | `"sm" \| "md"` | `"md"` | Height and icon scale. |
| `label` | `string` | `"Action toolbar"` | Accessible toolbar label for screen readers. |

## States

- **resting**: Compact hairline capsule showing icon buttons.
- **expanded**: Hovered or focused item expands its pill background and reveals text label.
- **confirmed**: In-place checkmark and confirmLabel feedback on execution.

## What it handles

Toolbars with full text labels take excessive horizontal space, while icon-only toolbars leave users guessing what each glyph does. This component gives the density of icon buttons with the clarity of full text on demand.

- **Smooth grid expansion**: Labels expand horizontally via grid-template-columns transitions without stuttering layout shifts.
- **Sliding neighbours**: Neighbouring buttons slide aside with rational easing curves as the active item grows.
- **In-place confirmation**: Selected actions morph their label and display an affirmative green checkmark for 1.6s before reverting.
- **Semantic tones**: Supports default neutral, primary, and danger tone pills for critical actions like Delete.

## Replaces

cramped text toolbars, cryptic icon-only bars with laggy tooltips, modal confirmation popups

## Where it fits

- **Document header toolbars**: Quick actions (Undo, Redo, Archive, History, Delete) in compact spaces.
- **Canvas & card hover bars**: Contextual toolbars that expand details on hover without cluttering the screen.
- **Note editors & markdown headers**: Publish, copy, and formatting actions with immediate in-place feedback.

## Notes

- Pure CSS grid animation ensures zero layout reflow overhead.
- Full arrow-key navigation allows keyboard users to cycle through tools effortlessly.

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