Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Related 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