Args vs ArgTypes

Viewed 2601

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: '',
};
1 Answers

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 component interface property, in TypeScript.

Related