React Button Group - Zoom Controls
Zoom control button group with increase/decrease and reset functionality for image and document scaling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Visual content demands scale control—zoom buttons enable flexible viewing. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's ZoomInIcon, ZoomOutIcon, RotateCcwIcon, and MaximizeIcon for zoom controls with percentage-based scaling and boundary enforcement using Math.max/Math.min. Built on Radix UI with discrete 25% increments and explicit reset/fit actions, the pattern delivers zoom controls with clear magnitude indication. Perfect for image viewers like Figma or Photoshop adjusting canvas scale, PDF readers like Adobe Acrobat controlling document zoom, map applications like Google Maps managing map detail, or any visual interface where content scale should be adjustable—button groups unify zoom actions, percentage display shows current scale, reset/fit buttons provide quick returns to defaults. The dual approach shown (full controls with reset/fit vs minimal with percentage display) demonstrates how zoom interfaces adapt to different toolbar densities, with comprehensive controls serving feature-rich applications while minimal variants work in space-constrained mobile interfaces or floating toolbars overlaying content.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-media-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-media-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-media-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-media-3.jsonRelated patterns you will also like
Volume Controls
Audio level adjustment buttons
Player Controls
Media playback buttons
Quantity Picker
Increment/decrement controls
Slider Component
Range input alternative
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons