# Button

Buttons allow users to take actions, and make choices, with a single tap.<br>

Default button size is `medium` and status color is `primary`.

```jsx
import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   caption="Button"
   onPress={() => {}}
/>
```

Button can be disabled with `disabled` property.

```jsx
import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   disabled
   caption="Button"
   onPress={() => {}}
/>
```

Button can be styled with `rounded`, `bordered` properties.

```jsx
import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   rounded
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   bordered
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   rounded
   bordered
   caption="Button"
   onPress={() => {}}
/>
```

Button can be used with icon.

```jsx
import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   rounded
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>
```

Buttons can be resized by using `sm`, `md`, `lg` property.

```jsx
import { Button } from '../components'

<Button
   style={styles.demoButton}
   primary
   sm
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   lg
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>
```

You can specify background-color properties.

```jsx
import { Button } from '../components'
import { colors } from '../../styles';

<Button
   style={styles.demoButton}
   bgColor={colors.green}
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   primary
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>

<Button
   style={styles.demoButton}
   secondary
   icon={<Icon />}
   caption="Button"
   onPress={() => {}}
/>
```