Rendering multiple variants with Storybook

Question

I am building my storybook documentation for a library I built with React and I am not finding a easy way to render multiple variants in the same page.

So, what I have so far is something like this

const Template = (args, { argTypes }) => <Title {...args} />

export const Primary = Template.bind({});
export const Success = Template.bind({});
export const Warning = Template.bind({});
export const Inverse = Template.bind({});
export const Default = Template.bind({});
export const Info = Template.bind({});
export const Danger = Template.bind({});
export const Disabled = Template.bind({});

Primary.args = {
  children: 'Primary',
  level: 3, // <- this can go from 1 to 5,
  as: 'h1', 
  variant: 'primary',
}

Success.args = {
  children: 'Success',
  level: 3, // <- this can go from 1 to 5,
  as: 'h1',
  variant: 'success',
}

etc...

This generates this:

and I am trying to achieve something like this when I render each variant:

How can I do something like that with Storybook?

Schlessinger

Answer 1

You can render multiple instance of Component inside a Story by using decorators

Sample code (should be similar for your code):

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Primary.decorators = [
  () => {
    return (
      <>
        <Button {...Primary.args as ButtonProps} level={1} />
        <Button {...Primary.args as ButtonProps} level={2} />
        <Button {...Primary.args as ButtonProps} level={3} />
      </>
    );
  },
];

Output:

More info, there are 3 level of decorators, it worth a read:

1. Story level
2. Component level
3. Global level

Contestation

Answer 2

anyone who is struggling on Vue, here is example of how you can implement mutiple variants in one story:

export const AllColors: Story = {
  render: (args) => ({
    components: { Button },
    setup() {
      return { args }
    },
    template: `
      <div class="flex items-center gap-4">
        <Button v-bind="args" color="primary" />
        <Button v-bind="args" color="warning" />
        <Button v-bind="args" color="danger" />
        <Button v-bind="args" color="secondary" />
        <Button v-bind="args" color="success" />
      </div>
    `
  })
}

where args is your global args for this story

Archaeology

Works well; thx. – Natterjack