To use auto-detected controls with React, you must fill in the `component` field in your story metadata:

```ts
// Button.stories.js|jsx|ts|tsx

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};
```


Storybook uses this to auto-generate the `ArgTypes` for your component based on either `PropTypes` (using [`react-docgen`](https://github.com/reactjs/react-docgen)) or `TypeScript` types (using [`react-docgen-typescript`](https://github.com/styleguidist/react-docgen-typescript)).