Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Zoom Controls Button Group for Vue

Zoom from 25% to 400% in steps of 25, starting at 100%, with Reset and Fit both returning to 100%.

UI library: Ark UI

Zoom starts at 100%. Zoom out and zoom in move by 25, and the level stays between 25% and 400%. The buttons stay enabled at the ends. Reset and Fit both go back to 100%. The percent between the icons does not change the zoom, and nothing is scaled.

Use this for an image or a document. Fit should measure the content if 100% is not actually a fit. A smooth level is a Slider. In Vue, Ark UI does not scale the content.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div class="flex flex-col gap-4">
  <ButtonGroup aria-label="Zoom">
    <Button aria-label="Zoom out" @click="zoomOut" size="icon-sm" variant="outline">
      <ZoomOutIcon aria-hidden="true" />
    </Button>
    <Button @click="resetZoom" size="sm" variant="outline">
      <RotateCcwIcon aria-hidden="true" data-icon="inline-start" />Reset
    </Button>
    <Button aria-label="Zoom in" @click="zoomIn" size="icon-sm" variant="outline">
      <ZoomInIcon aria-hidden="true" />
    </Button>
    <Button @click="resetZoom" size="sm" variant="outline">
      <MaximizeIcon aria-hidden="true" data-icon="inline-start" />Fit
    </Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Zoom">
    <Button aria-label="Zoom out" @click="zoomOut" size="icon-sm" variant="outline">
      <ZoomOutIcon aria-hidden="true" />
    </Button>
    <Button size="sm" variant="outline">{{ zoom }}%</Button>
    <Button aria-label="Zoom in" @click="zoomIn" size="icon-sm" variant="outline">
      <ZoomInIcon aria-hidden="true" />
    </Button>
  </ButtonGroup>
</div>

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.

API Reference

Button Group

Sets aria-label="Zoom". The rest is on the Button Group page.

Button

Sets aria-label="Zoom out", click="zoomOut", size="icon-sm", variant="outline", click="resetZoom" and size="sm". The rest is on the Button page.

All 39 button group examples