> For the complete documentation index, see [llms.txt](https://docs.reactnativestarter.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.reactnativestarter.com/components/button.md).

# 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={() => {}}
/>
```