Expanding button group

Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.

npx shadcn@latest add @silicon-ui/expanding-button-group
actiongrouptoolbarnew
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/expanding-button-group

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/expanding-button-group/expanding-button-group.tsx
    • components/silicon-ui/expanding-button-group/expanding-button-group.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { ExpandingButtonGroup } from "@/components/silicon-ui/expanding-button-group/expanding-button-group";

API reference

PropTypeDefault
items*readonly ExpandingButtonGroupItem[]—
label*

Accessible name of the toolbar, such as "Message actions".

string—
sizeExpandingButtonGroupSize

"sm""md"

"md"
defaultExpanded

Id of the action whose label shows at rest, usually the primary one. Defaults to the first enabled action: one action is always expanded. Pointing at or focusing another moves the expansion there, and it returns here when the pointer and focus leave.

string | nullnull
onAction

Called with the item id whenever an action runs, before its own onSelect.

(id: string) => void—
confirmDuration

How long the confirmation stays, in milliseconds.

number1400
classNamestring—
styleCSSProperties—

Dependencies

npm
motion
Registry
silicon-motion-tokens