docs/essentials/auto-generated-controls/react.mdx
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)).