Any way to get the top level + / - buttons back?

[bschlenk]

Summary

The + / - buttons were probably my most used feature of storybook while developing a component. They're now nested inside of a menu and so it takes two clicks to change, which is way more annoying than it sounds. Is there any way to get the buttons back on the top bar so that they're a single click again? I know there are keyboard shortcuts but I can never remember them and also can never remember which menu they're inside of.

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @bschlenk! I'm Dosu and I'm helping the Storybook team.

Unfortunately, there's no configuration option to restore the old three-button layout — the consolidation into a single dropdown was an intentional toolbar redesign in PR #33375. The toolbar.zoom.hidden config only controls whether the new single button is visible at all, not its style.

That said, there are keyboard shortcuts that might save you from the two-click workflow:

• Zoom in: Alt + = (or Alt + +)
• Zoom out: Alt + -
• Reset to 100%: Alt + 0

You can also hover the zoom button and use the mouse scroll wheel to zoom in/out without opening the menu [1].

If restoring top-level buttons is something you'd like to see as a configurable option, it might be worth proposing that here so maintainers can weigh in on whether a toolbar.zoom.style or similar config could be added.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[MILLERMARRU]

There is no setting to restore the buttons in the sidebar header, but you can get the single-click behavior back two ways.

The lighter one: remap the shortcuts to something you will actually remember. The keyboard shortcuts page in the manager UI (in the same menu, "Keyboard shortcuts") lets you rebind expand all and collapse all to whatever keys you want, and custom bindings persist. That fixes the "can never remember them" half of the problem without any code.

The one-click one: a tiny manager addon that puts real buttons back in the toolbar. In .storybook/manager.ts (or a small addon file it imports):

import React from 'react'
import { addons, types, useStorybookApi } from 'storybook/manager-api'
import { IconButton } from 'storybook/internal/components'

addons.register('my/sidebar-buttons', () => {
  addons.add('my/sidebar-buttons/tool', {
    type: types.TOOL,
    title: 'Collapse all',
    render: () => {
      const api = useStorybookApi()
      return (
        <>
          <IconButton title="Expand all" onClick={() => api.expandAll()}>+</IconButton>
          <IconButton title="Collapse all" onClick={() => api.collapseAll()}>-</IconButton>
        </>
      )
    },
  })
})

expandAll and collapseAll are the same manager API calls the menu items use, so the behavior is identical, just one click and always visible. The buttons land in the canvas toolbar rather than the sidebar header, but for the develop-loop you describe (toggling while working on one component) that tends to be even closer to the mouse.

Beyond that, it is probably worth filing the feedback as a UI issue too. "Most used control moved behind a menu" is exactly the kind of regression report the maintainers act on, and you already have the use case written up here.