You are viewing documentation for a previous version of StorybookSwitch to latest version
Story layout
The layout
parameter allows you to configure how stories are positioned in Storybook's Canvas tab.
Global layout
You can add the parameter to your ./storybook/preview.js
, like so:
.storybook/preview.ts
In the example above, Storybook will center all stories in the UI. layout
accepts these options:
centered
: center the component horizontally and vertically in the Canvasfullscreen
: allow the component to expand to the full width and height of the Canvaspadded
: (default) Add extra padding around the component
Component layout
You can also set it at a component level like so:
Button.stories.ts|tsx
Story layout
Or even apply it to specific stories like so:
Button.stories.ts|tsx