Button Group

Joined button group with shared borders, horizontal or vertical, rounding only the outer corners.

#button #group #toolbar #pagination

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

ButtonGroupProps

Also accepts all props of React.ComponentProps<"div">

Prop	Type	Default	Description
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	—

Install

$ npx shadcn@latest add https://chromotion.dev/r/button-group.json

More like this

HeroUI Button Group

HeroUI-style group with solid/bordered/flat/faded variants, 4 semantic colors and configurable radius.

Astryx Button Group

Segmented radio group with a spring-sliding glowing thumb and arrow-key navigation.

Texture Button

Dark button with an SVG feTurbulence grain overlay; grain strength is adjustable.