shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Interactive
Segmented Control Button Group for React
Two segmented controls of ghost buttons where the selected section or period gets the solid fill.
A segmented control built from ghost buttons. The unselected options have no border or fill, so only the selected one stands out with the default fill. The two groups keep separate values: a section starting at Overview and a period starting at Week.
Preview
Installation
FAQ
How is each selection tracked?
Each group has its own value, overview and week. Each button carries its own value, and pressing it stores that value for its group.
Why ghost and not outline?
variant="ghost" shows no edge until hover, so the row reads as one strip with a single filled segment. Use outline if the options should look like separate buttons.
Should Overview, Analytics and Reports be Tabs?
If they switch panels on the page, yes: Tabs link each trigger to its panel and handle Arrow keys. Use buttons when the choice changes a setting rather than which panel is visible.
Related
- Timeline Controls Button GroupA time range picker with Day, Week, Month
- View Switcher Button GroupA view switcher for Grid, List and Cards
- Basic TabsFour horizontal tabs that switch between
- Default Toggle GroupA toggle group for bold, italic and
- Basic Button GroupThree rows of outline buttons joined into
- Filter Chips Button GroupFilter buttons in two groups where