Button group

Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.

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

Installation

With the shadcn CLI

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

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-dropdown-menu lucide-react motion

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

    • components/silicon-ui/button-group/button-group.tsx
    • components/silicon-ui/button-group/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 { ButtonGroup } from "@/components/silicon-ui/button-group/button-group";

API reference

PropTypeDefault
items*ButtonGroupItem[]—
label*

Accessible name of the group, such as "Document actions".

string—
menu

Adds a trailing chevron segment that opens these actions in a menu aligned to the group's edge.

ButtonGroupMenu—
variantButtonGroupVariant

"outline""solid"

"outline"
sizeButtonGroupSize

"sm""md"

"md"
orientationButtonGroupOrientation

"horizontal""vertical"

"horizontal"
collapseLabels

When the row does not fit its container, segments with an icon drop their label and keep the icon. Horizontal only.

booleantrue
disabled

Disables every segment and the menu.

booleanfalse
classNamestring—
styleCSSProperties—

Dependencies

npm
@radix-ui/react-dropdown-menulucide-reactmotion
Registry
silicon-motion-tokens