Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Conditional Toolbar Selector
Helper Storybook addon to define story specific toolbar dropdown to use in custom decorators
npm install storybook-conditional-toolbar-selector
Last updated over 3 years ago
Downloads per week
Readme View on GitHub



Helper Storybook addon to define story specific toolbar dropdown to use in custom decorators, similar to globals but with multiple variants.

E.g. for different sets of languages or themes available for backend vs public site specific stories or having some options not available on all stories.

screenshot of the selector


Setup / Usage

With npm:

npm install --save-dev storybook-conditional-toolbar-selector

With yarn:

yarn add -D storybook-conditional-toolbar-selector


Register addon in .storybook/main.js or .storybook/main.ts

module.exports = {
  // ...
  addons: [
    // ...


Define available sets and options in .storybook/preview.js or .storybook/preview.ts

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  customConditionalToolbar: {
    /** Defines the possible sets that can be shown */
    sets: [
        id: 'set-a',
        options: [
          { id: 'a1', title: 'My First Option in Set A' },
          { id: 'a2', title: 'My Second Option in Set B' },
        id: 'set-b',
        options: [{ id: 'b1', title: 'Set B Option 1' }, { id: 'b2' }],
    /** Icon to use in toolbar, defaults to `switchalt`. All possible icons here: */
    icon: 'redirect',
    /** title when hovering over the icon */
    title: 'Test title',
    /** Setting disable to true makes the addon disabled by default */
    // disable: true,

Typescript example with types


Use the customConditionalToolbar parameter in you story to define if and which set to use:

export const MyStory = Template.bind({});
MyStory.parameters = {
  customConditionalToolbar: {
    setToUse: 'set-b',
    defaultOption: 'b2',

Typescript examples


Preview Parameters API (Global)

  /** Title for the toolbar icon - (Optional) */
  title?: string;

  /** Icon to use in toolbar, defaults to `switchalt`. All possible icons here: - (Optional) */
  icon?: IconsProps["icon"];

  /** Sets of dropdown options */
  sets: DropdownSet[];

  /** Default set to use `null | undefined` do disable theme selection if not explicitly set - (Optional) */
  default?: string | null;

  /** If nothing is selected the first option is auto-selected - defaults to `true` - (Optional)*/
  autoSelectFirstOption?: boolean;

  /** If `true` toolbar item is disabled (hidden) - (Optional) */
  disable?: boolean;

Typescript type ConditionalToolbarSelectorParameter

Story Parameter API (Per Story)

All options that Preview Parameters API (Global) provides (all as optional) plus the options below:

  /** Set to pick the theme from - (Optional)*/
  setToUse?: string | null;

  /** default option to select - (Optional) */
  defaultOption?: string | null;

Typescript type CustomConditionalToolbarStoryParameter



  • Per Set selection persists across stories until refresh/reload of storybook
  • If needed the defaults and fallbacks need to be set manually (Example)
  • All examples are in react, but it should in theory work in all frameworks

Example consumption in a decorator

Join the community
6,615 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI