Options Parameter

Storybook UI is configurable using an options API that allows you to tweak its appearance globally and for each story.

NOTE: If you’ve used older versions of Storybook this is formerly addon-options, which has been deprecated.

Global options

Import and use addParameters with the options key in your config.js file.

  1. import { addParameters, configure } from '@storybook/react';
  3. // Option defaults:
  4. addParameters({
  5.   options: {
  6.     /**
  7.      * show story component as full screen
  8.      * @type {Boolean}
  9.      */
  10.     isFullscreen: false,
  11.     /**
  12.      * display panel that shows a list of stories
  13.      * @type {Boolean}
  14.      */
  15.     showNav: true,
  16.     /**
  17.      * display panel that shows addon configurations
  18.      * @type {Boolean}
  19.      */
  20.     showPanel: true,
  21.     /**
  22.      * where to show the addon panel
  23.      * @type {('bottom'|'right')}
  24.      */
  25.     panelPosition: 'bottom',
  26.     /**
  27.      * regex for finding the hierarchy separator
  28.      * @example:
  29.      *   null - turn off hierarchy
  30.      *   /\// - split by `/`
  31.      *   /\./ - split by `.`
  32.      *   /\/|\./ - split by `/` or `.`
  33.      * @type {Regex}
  34.      */
  35.     hierarchySeparator: /\/|\./,
  36.     /**
  37.      * regex for finding the hierarchy root separator
  38.      * @example:
  39.      *   null - turn off multiple hierarchy roots
  40.      *   /\|/ - split by `|`
  41.      * @type {Regex}
  42.      */
  43.     hierarchyRootSeparator: /\|/,
  44.     /**
  45.      * sidebar tree animations
  46.      * @type {Boolean}
  47.      */
  48.     sidebarAnimations: true,
  49.     /**
  50.      * enable/disable shortcuts
  51.      * @type {Boolean}
  52.      */
  53.     enableShortcuts: true,
  54.     /**
  55.      * show/hide tool bar
  56.      * @type {Boolean}
  57.      */
  58.     isToolshown: true,
  59.     /**
  60.      * theme storybook, see link below
  61.      */
  62.     theme: undefined,
  63.     /**
  64.      * function to sort stories in the tree view
  65.      * common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)`
  66.      * if left undefined, then the order in which the stories are imported will
  67.      * be the order they display
  68.      * @type {Function}
  69.      */
  70.     storySort: undefined,
  71.   },
  72. });

For more information on configuring the theme, see theming.

Per-story options

The options-addon accepts story parameters on the options key:

  1. import { storiesOf } from '@storybook/react';
  2. import MyComponent from './my-component';
  4. storiesOf('Addons|Custom options', module)
  5.   // If you want to set the option for all stories in of this kind
  6.   .addParameters({ options: { panelPosition: 'bottom' } })
  7.   .add(
  8.     'Story for MyComponent',
  9.     () => <MyComponent />,
  10.     // If you want to set the options for a specific story
  11.     { options: { panelPosition: 'right' } }
  12.   );