New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Paddings
Add paddings to view components under different white space settings
npm install storybook-addon-paddings
Last updated 8 months ago
15.3k
Downloads per week
Readme View on GitHub

Storybook Paddings Addon

npm package version Build status Dependencies status

🔲 A Storybook addon to add different paddings to your preview. Useful for checking how components behave when surrounded with white space.

Demo

View demo →

Installation

npm install --save-dev storybook-addon-paddings

within .storybook/main.js:

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

See example for a minimal working setup.

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:

// Button.stories.js

// Set padding options for all Button stories
export default {
  title: 'Button',
  parameters: {
    paddings: {
      values: [
        { name: 'Small', value: '16px' },
        { name: 'Medium', value: '32px' },
        { name: 'Large', value: '64px' },
      ],
      default: 'Large',
    },
  },
};

// Disable addon in Button/Large story only
export const Large = Template.bind({});
Large.parameters = {
  paddings: { disable: true },
};
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI