import { mdx } from '@mdx-js/react';
import { Props, Description } from '../src';
import { Button } from './Button';
import { CssLayout } from '~/mdx-layout-css';
export default CssLayout;

# Props Component

<Description of={Props} />

### Example: Props of `Button` component

<Props of={Button} />

## Typescript Component Usage

```tsx

// ./Button.tsx
type ButtonProps = {
  /**
  Type of the button. Change to adjust styling.
  */
  type?: 'primary' | 'secondary';
  /**
  Label text of the button.
  */
  text: 'string';
  /**
  Whether the button is disabled. A disabled button is greyed out and onPress is not called on touch.
  */
  disabled?: boolean;
  /*
  Function to execute on press.
  **/
  onPress: () => {};
};

/**
A button is component that the user can press to trigger an action.
 */
export const Button = ({
  type = 'primary',
  text,
  disabled = false,
  onPress = () => {},
}: ButtonProps) => ...


// Props of button
import { Button } from './Button';
import { Props } from '@divriots/dockit-react';

<Props of={Button} />;
```

## Javascript Component Usage

```jsx

// ./Button.jsx
/**
A button is component that the user can press to trigger an action.
 */
const Button = ({type, text, disabled, onPress }: ButtonProps) => ...

Button.propTypes = {
  /**
  Type of the button. Change to adjust styling.
  */
  type: PropTypes.oneOf(['primary', 'secondary']),
  /**
  Label text of the button.
  */
  text: PropTypes.string,
  /**
  Whether the button is disabled. A disabled button is greyed out and onPress is not called on touch.
  */
  disabled: PropTypes.bool;
  /*
  Function to execute on press.
  **/
  onPress: PropTypes.func
};

Button.defaultProps = {
  type: 'primary',
  disabled: false,
  onPress: () => {},
}

// Props of button
import { Button } from './Button';
import { Props } from '@divriots/dockit-react';

## Props

<Props of={Props} />
```

## Props filter

Example of Props filtered

```tsx
<Props of={Button} filter={({ name }) => name.startsWith('t')} />
```

<Props of={Button} filter={({ name }) => name.startsWith('t')} />