MultiButton — animated expanding icon-button group

[OneDayDance]

Component: MultiButton

What it does

A pill-shaped button group where each item shows only its icon at rest.
On hover (desktop) or first tap (mobile), the hovered item expands to
reveal its label while sibling items compress to icon-only width. The
total container width never changes — all motion is internal.

Three exports:

Export	Description
MultiButton	Always-visible group; all items shown at rest
CompactMultiButton	Collapses to a single icon at rest, expands on hover
MultiButtonGroup	Context wrapper that syncs all contained instances to the same width (useful in tables)

Variants & sizes

Supports the standard shadcn variants (default, outline, secondary,
ghost) and sizes (sm, md, lg).

Use cases

• Row-level action buttons in data tables (Edit / Duplicate / Delete)
• Toolbars where space is constrained but discoverable labels matter
• Any context where you want the expressiveness of a labelled button
  without paying the permanent width cost

Touch behaviour

First tap expands the slot (label reveal); second tap fires the action.
Tapping outside collapses. CompactMultiButton first-tap expands the
whole group, second tap on an item reveals its label, third fires.

Dependencies

• lucide-react (icons via LucideIcon type)
• tailwind-merge + clsx (already required by shadcn)
• No new Radix primitives needed

Demo

Open live demo →

Implementation notes

Width is computed analytically (icon cell width × N + max label width +
dividers) so the container never jumps — there's no ResizeObserver or
DOM measurement needed. The MultiButtonGroup context uses a shared
registry of per-instance max widths so every row in a table stays
pixel-identical without callers needing a syncWidthTo prop.

[Om-singh-ui]

The MultiButton component is great for keeping row-level or toolbar actions compact while still showing labels on interaction. Here are some tips:

1. Choosing the right variant/size: Use sm or md for tables to save space; lg works well for toolbars or more prominent actions.
2. CompactMultiButton on mobile: Remember that the first tap expands the group make sure this UX is intuitive for your users. You could also add subtle hover/focus animations to hint interactivity.
3. MultiButtonGroup context: If you have multiple rows, using MultiButtonGroup ensures all rows stay aligned, which is perfect for data tables. No need for extra width calculations or DOM observers.
4. Styling & customization: Since it uses Tailwind + clsx + tailwind-merge, you can safely extend with your own classes or theme colors without breaking built-in behavior.