Customizing Existing Tools in Our Viewer Toolbar

It’s possible to customize the following properties of built-in items:

• title

• icon

• className

• mediaQueries

• disabled

• preset

Please see the API Reference to learn more about each individual property.

The following example modifies the current toolbar items to ensure that the zoom buttons are shown in all viewport widths by setting the mediaQueries property to ["all"]:

// Change the `mediaQueries` for the zoom items
// so that they're always shown on any device.
instance.setToolbarItems((items) =>
	items.map((item) => {
		if (
			item.type === "zoom-in" ||
			item.type === "zoom-out" ||
			item.type === "zoom-mode"
		) {
			item.mediaQueries = ["all"];
		}
		return item;
	})
);