React Button Group - Segmented Control
Segmented control button group with ghost variant for tab-like navigation and content switching
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Segments divide spaces—controls enable smooth context switching. This React component combines shadcn/ui's Button and ButtonGroup components with ghost variant for minimal segmented controls with stateful selection. Built on Radix UI with variant switching between default (active) and ghost (inactive) states using size="sm" and w-fit containers for compact navigation controls, the pattern delivers iOS-style segmented controls with subtle visual distinction. Perfect for settings panels switching between configuration sections, dashboard tabs toggling between overview and details, app navigation between top-level sections, or any interface where tab-like controls should feel lightweight—button groups create unified segments, ghost variant provides minimal inactive state, default variant highlights selection clearly.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-4.jsonRelated patterns you will also like
Timeline Controls
Time period selectors
View Switcher
Layout mode controls
Toggle Group
Segmented toggle controls
Tabs Component
Content section tabs
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons