Storybook Addon Backgrounds

Storybook Background Addon can be used to change background colors inside the preview in Storybook.

Framework Support

Installation

npm i -D @storybook/addon-backgrounds

Configuration

Then create a file called addons.js in your storybook config.

Add following content to it:

import '@storybook/addon-backgrounds/register';

Usage

Then write your stories like this:

import React from 'react';
import { storiesOf } from "@storybook/react";
import backgrounds from "@storybook/addon-backgrounds";

storiesOf("Button", module)
  .addDecorator(backgrounds([
    { name: "twitter", value: "#00aced", default: true },
    { name: "facebook", value: "#3b5998" },
  ]))
  .add("with text", () => <button>Click me</button>);

Of course it's easy to create a library module so you can re-use:

import addonBackgrounds from "@storybook/addon-backgrounds";

export const backgrounds = addonBackgrounds([
  { name: "twitter", value: "#00aced", default: true },
  { name: "facebook", value: "#3b5998" },
]);

import React from 'react';
import { storiesOf } from "@storybook/react";

import { backgrounds } from "./my-lib";

storiesOf("Button", module)
  .addDecorator(backgrounds)
  .add("with text", () => <button>Click me</button>);

In the case of Vue, use it similarly to React!

import { storiesOf } from '@storybook/vue';
import backgrounds from '@storybook/addon-backgrounds';

storiesOf('Addon|Backgrounds', module)
  .addDecorator(
    backgrounds([
      { name: 'twitter', value: '#00aced' },
      { name: 'facebook', value: '#3b5998', default: true },
    ])
  )
  .add('story 1', () => {
    const content = 'You should be able to switch backgrounds for this story';

    return {
      template: `<button>${content}</button>`,
    };
  })

In the case of Mithril, use these imports:

import { storiesOf } from '@storybook/mithril';
import backgrounds from "@storybook/addon-backgrounds/mithril";