I'm trying to better understand when to use args vs when to use argTypes? What are the differences?

From what I read it seems that argTypes is just an expansion of args and allows for better functionality an documentations. But is there more?

In the case below, we have can update the 'label' within the storybook UI whether its argTypes or args.

** Adding Minimal Reproducible Example **

// Button.stories.js

export default {
  title: 'Button',
  argTypes: {
    label: { control: 'text' },
  },
};

export const Basic = (args) => <Button {...args} />;
Basic.args = {
  label: '',
};

I'm trying to better understand when to use args vs when to use argTypes? What are the differences?

From what I read it seems that argTypes is just an expansion of args and allows for better functionality an documentations. But is there more?

In the case below, we have can update the 'label' within the storybook UI whether its argTypes or args.

** Adding Minimal Reproducible Example **

// Button.stories.js

export default {
  title: 'Button',
  argTypes: {
    label: { control: 'text' },
  },
};

export const Basic = (args) => <Button {...args} />;
Basic.args = {
  label: '',
};

• javascript
• reactjs
• storybook

Share Improve this question Follow edited May 5, 2021 at 19:43 gkim795 asked May 5, 2021 at 19:29 gkim795gkim795 17011 silver badge88 bronze badges 6

• May you add a minimal reproducible example showing what you're talking about? – evolutionxbox Commented May 5, 2021 at 19:32
• @evolutionxbox added an example. thanks! – gkim795 Commented May 5, 2021 at 19:44
• 1 args is actually the arguments being passed to the ponent. argTypes looks like some kind of descriptive type object. – evolutionxbox Commented May 5, 2021 at 19:45
• They are totally different. What makes you think same? – Bhojendra Rauniyar Commented May 5, 2021 at 19:56
• 1 storybook.js/docs/react/api/argtypes explains argTypes, and storybook.js/docs/react/writing-stories/args explains args – evolutionxbox Commented May 5, 2021 at 20:00

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

Reposting a helpful explanation from the discord chat:

arg is the value passed to the Story. They're analogous to props, in React. argType is the type (label, description, type, control, defaultValue, etc.) for an arg. They're analogous to propType in React, or a ponent interface property, in TypeScript.