Storybook Paddings Addon
🔲 A Storybook addon to add different paddings to your preview. Useful for checking how components behave when surrounded with white space.
View demo →
Installation
npm install --save-dev storybook-addon-paddings
export default {
addons: ['storybook-addon-paddings'],
}
export default {
parameters: {
layout: 'fullscreen',
},
}
Configuration
The paddings toolbar comes with small, medium and large options by default, but you can configure your own set of paddings via the paddings
parameter.
To configure for all stories, set the paddings
parameter in .storybook/preview.js
:
export const parameters = {
paddings: {
values: [
{ name: 'Small', value: '16px' },
{ name: 'Medium', value: '32px' },
{ name: 'Large', value: '64px' },
],
default: 'Medium',
},
}
You can also configure on per-story or per-component basis using parameter inheritance:
export default {
title: 'Button',
component: Button,
parameters: {
paddings: {
values: [
{ name: 'Small', value: '16px' },
{ name: 'Medium', value: '32px' },
{ name: 'Large', value: '64px' },
],
default: 'Large',
},
},
}
export const Large {
parameters: {
paddings: { disable: true },
},
}
See other story examples.