StorybookJS: Create control options but alias the label of this option

Viewed 23

I have a component which has a conditional prop that is called onClose and can receive a callback function. Depending on whether this prop is passed, the design of the component will look different.

In order to demonstrate this in my component I have these properties in my Storybooks default export:

  argTypes: {
    onClose: {
      options: [
        () => console.log('test');
        null,
      ],
      control: {
        type: 'radio',
        labels: {
          null: 'some value' // <-- works
          ???: 'some other value' // <-- what to provide for the function?
        }
      },
    },
  },

how can I alias the values of options so that it won't look like this:

enter image description here

I want the behaviour of those options, but I want a label for those options. Is argTypes maybe the wrong thing to set this?

0 Answers
Related