#StackBounty: #reactjs #storybook Show all variations of a component on a single page in React Storybook but still have Knobs?

Bounty: 150

I have a button component that can be of different types eg primary, secondary, etc:

export const buttonTypes = [

const Button = ({ text, type }) => {
        <button className={type}>{text}</button>

Button.propTypes = {
    text: PropTypes.string,
    type: PropTypes.oneOf(buttonTypes),

In my Storybook file I’m mapping through the options. This means you can see all the variants on a single page and if another string was added to the buttonTypes array it would automatically be added to the style guide:

import ButtonComponent, { buttonTypes } from './Button';

const Button = () => {
                    <ButtonComponent key={type} text={type} type={type} />

export default {
  title: 'Components',
  component: Button,

The problem is that this doens’t work with with many of the add-ons eg knobs. For knobs to work you need Button to be the actual component, not a wrapper as I did above.

import ButtonComponent, { buttonTypes } from './Button';

const Button = () => {
  return (
      type={select('type', buttonTypes, buttonTypes.primary)}

Is there a way to use knobs and show all the variations on a single page? Ideally without having to create each component manually as this is more work and then won’t automatically update if a new string is added to buttonTypes.

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.