import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import * as Stories from './examples';

<Meta title="Components|Button" />

# Button

A basic button component. Supports a minimal level of customization. You can
build your own custom button using `TouchableOpacity` or `TouchableHighlight`.

## Props

| Name                      | Type      | Default |
| ------------------------- | --------- | ------- |
| accessibilityLabel        | ?string | |
| color                     | ?string   | '#2196F3' |
| disabled                  | ?boolean  | false |
| onPress                   | ?Function | |
| testID                    | ?string   | |
| title                     | ?string   | |

### color

Customize the background color of the button.

<Preview withSource='none'>
  <Story name="color">
    <Stories.color />
  </Story>
</Preview>

### disabled

Prevent all interactions with the button.

<Preview withSource='none'>
  <Story name="disabled">
    <Stories.disabled />
  </Story>
</Preview>

### onPress

Called when the button is pressed by a pointer or keyboard.

<Preview withSource='none'>
  <Story name="onPress">
    <Stories.onPress /></Story>
</Preview>

### title

Text to display inside the button.

```js
<Button title="Text content" />
```
