React Button Group - Map Controls
Map view mode selector button group for switching between satellite, road, terrain, and hybrid map layers
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Maps reveal different information through different layers—view controls empower spatial exploration. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's MapIcon and Navigation2Icon for map layer selection with stateful variant toggling. Built on Radix UI with variant switching between default (active) and outline (inactive) states using size="sm" for compact map overlay controls, the pattern delivers map view mode switchers with clear selection indication. Perfect for mapping applications like Google Maps or Mapbox offering layer switching, real estate platforms showing property locations with different map contexts, logistics dashboards displaying route planning with terrain awareness, or any location interface where map visualization should adapt to user needs—button groups unify layer options, variant switching communicates active view, text labels clarify map modes.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-display-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-display-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-display-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-display-2.jsonRelated patterns you will also like
Chart Controls
Data visualization switchers
Timeline Controls
Time period selectors
Toggle Group
Segmented toggle controls
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons
Select Component
Dropdown selection