shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Display
Map Controls Button Group for React
A map layer picker with Satellite, Road, Terrain and Hybrid, and Map and Street buttons with icons that share one selection.
The layer switch that sits on a map. The first group names four base layers; the second offers Map and Street with icons. One value backs both, so a single button is filled at a time and announced as pressed.
Preview
Installation
FAQ
How is the selected layer tracked?
One value, starting at satellite. Each button carries its own value, and pressing it stores that value. The matching button gets variant="default" and aria-pressed.
Do the two rows share a selection?
Yes. Picking Street clears Satellite. Give each row its own value if the layer and the view should be chosen separately.
Are the icons on Map and Street announced?
No. MapIcon and Navigation2Icon have aria-hidden="true", so the buttons are read by their text.
Does this draw a map?
No. It only stores the choice. Pass it to your map library's style or layer option.
How do I place the group over the map?
Position the ButtonGroup absolutely inside the map container, for example at top-2 end-2, and give it a background so it reads over the tiles.
How does the keyboard move through it?
Tab moves from button to button, and Enter or Space selects. A Toggle Group adds Arrow key movement if you need it.
Related
- Chart Controls Button GroupA chart type picker with Line, Bar and
- View Switcher Button GroupA view switcher for Grid, List and Cards
- Zoom Controls Button GroupZoom controls that step from 25% to 400%
- Default Toggle GroupA toggle group for bold, italic and
- Button with Text (Outline)A border, no fill
- Density Controls Button GroupA display density picker with Compact