How to disable 'Docs' tab in storybook?

Question

How do i disable the 'docs' (addons-docs) tab on a per story basis?

I've tried adding the key values below to a story, but nothing seems to work.

parameters: {
  docs: { disable: true, hidden: true }
},

I'm running Storybook 5.3.8.

Answer 1

I managed to do it with the v6.0.0-alpha.28 (@storybook/*@next) with the new parameters:

  previewTabs: {
    docs: { hidden: true },
  }

I've added the default config on preview.js:

addParameters({
  previewTabs: {
    docs: {
      hidden: false
    },
    canvas: {
      title: 'Story',
      hidden: false,
    },
  },
})

and also repositioned the Docs to be the first tab on manager.js:

import { addons } from '@storybook/addons';

addons.setConfig({
  previewTabs: {
    'storybook/docs/panel': { index: -1 },
  },
});

Hope it works on the long term :) Enjoy!

Answer 2

This will hide docs panel and show canvas only:

  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
  },

Tabs container will be hidden, if you have only one tab

Answer 3

Old Answers give you the technique to hide the docs but if someone will change the URL from story to docs, it will show the results, so I am giving you the way to perfectly remove the docs tab.

1st Method

If you added the @storybook/addon-docs package to your package.json and added it into .storybook/main.js ( addon array ) then remove it and restart your storybook webpack server.

2nd Method

In the latest version of the storybook, it recommends to add an essentials addon package coming from storybook that contains multiple addons such as actions, backgrounds, controls, docs, viewport, toolbars.

So if you installed that package and added it into the .storybook/main.js addon array then you disable it with the below code.

Replace your code from

module.exports = {
  addons: [
    ...,
    '@storybook/addon-essentials',
  ],
};

TO

module.exports = {
  addons: [
    ...,
    {
      name: '@storybook/addon-essentials',
      options: {
        docs: false,
      },
    },
  ],
};

Answer 4

Inside your MyStory.stories.j[t]sx file

To hide the "Docs" tab:

export default {
    title: 'YourTitle',
    parameters: {
        previewTabs: {
            'storybook/docs/panel': { hidden: true }
        },
        viewMode: 'canvas',
    }
};

To hide the "Canvas" tab:

export default {
    title: 'YourTitle',
    parameters: {
        previewTabs: {
            canvas: { hidden: true},
        },
        viewMode: 'docs',
    }
};

The viewMode: 'docs/canvas' it's necessary to set the default tab in that view, otherwise storybook will show the last tab opened in the previous view.