Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Media

Zoom Controls Button Group for React

Zoom controls that step from 25% to 400% in 25% steps, with Reset and Fit buttons and a row showing the zoom level.

Framework
UI library

Zoom for an image viewer or a document. Zoom out and zoom in step by 25%, clamped between 25% and 400%; Reset and Fit both return to 100%. The second row shows the current level between the two icon buttons.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the zoom tracked?

As a number, starting at 100. Zoom out subtracts 25 and stops at 25; zoom in adds 25 and stops at 400.

How are the icon-only buttons named?

Zoom out and Zoom in are aria-labels, with size="icon-sm". Reset and Fit have text, and their icons have aria-hidden="true".

Why do Reset and Fit do the same thing?

In the demo both set 100%, since there's no content to measure. Make Fit compute the level that fits your content in its container.

Does the percentage button do anything?

No. It shows the level and has no handler. Make it reset to 100% if you want, or use ButtonGroupText so it doesn't take focus.

Should zoom out be disabled at 25%?

It can be. The demo leaves both buttons enabled and clamps the value instead. Disable them at the limits so people can see they've reached the end.

How do I apply the zoom?

Scale your content with a CSS transform: scale() from the number divided by 100, or pass it to your viewer.

All 39 button group examples