# Button

To implement Button component into your project you'll need to add the import:

```jsx
import { Button } from '@kiwicom/orbit-react-native';
```

After adding import into your project you can use it simply like:

```jsx
<Button>Hello World!</Button>
```

## Props

Table below contains all types of the props available in Button component.

| Name               | Type                         | Default     | Description                                                                                                                                    |
| :----------------- | :--------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
| fullWidth          | `boolean`                    | `false`     | If `true`, the Button will grow up to the full width of its container.                                                                         |
| bordered           | `boolean`                    | `false`     | If `true`, the Button will have a lighter version, with border and light background.                                                           |
| circled            | `boolean`                    | `false`     | If `true`, the Button will have circular shape.                                                                                                |
| children           | `React.Node`                 |             | The content of the Button. [See Functional specs](#functional-specs)                                                                           |
| testID             | `string`                     |             | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!)                                 |
| disabled           | `boolean`                    | `false`     | If `true`, the Button will be disabled.                                                                                                        |
| iconLeft           | `React.Node`                 |             | The displayed icon on the left.                                                                                                                |
| iconRight          | `React.Node`                 |             | The displayed icon on the right.                                                                                                               |
| onPress            | `(event) => void \| Promise` |             | Function for handling onPress event.                                                                                                           |
| ref                | `func`                       |             | Prop for forwarded ref of the Button.                                                                                                          |
| **size**           | [`enum`](#enum)              | `"normal"`  | The size of the Button.                                                                                                                        |
| spaceAfter         | `enum`                       |             | Additional `marginBottom` after component. [See this docs](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken) |
| accessibilityRole  | `string`                     |             | Specifies the role of an element.                                                                                                              |
| accessibilityLabel | `string`                     |             | Adds `accessibilityLabel`                                                                                                                      |
| accessibilityHint  | `string`                     |             | Adds `accessibilityHint` [See this docs](https://facebook.github.io/react-native/docs/accessibility#accessibilityhint-ios-android)             |
| **type**           | [`enum`](#enum)              | `"primary"` | The type of Button.                                                                                                                            |
| width              | `number`                     | `0`         | The width of the Button. Number is defined in `dp`.                                                                                            |

### enum

| type          | size       |
| :------------ | :--------- |
| `"primary"`   | `"small"`  |
| `"secondary"` | `"normal"` |
| `"info"`      | `"large"`  |
| `"success"`   |            |
| `"warning"`   |            |
| `"critical"`  |            |
| `"facebook"`  |            |
| `"google"`    |            |
| `"white"`     |            |

## Functional specs

- If you want to render **Icon only Button**, you just need to let `children` prop empty and set up any `icon` you want to use.