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

# Button

There are three button components available: standard, text and icon.

## Standard Button

```javascript
<Button
  text='Save'
  action={ save }
  params={{ id: 3141 }}
/>
```

### Preview

<div align="left"><figure><img src="/files/jvYBOLsF0AxaBcahxvHZ" alt="" width="375"><figcaption></figcaption></figure></div>

### Props <a href="#props" id="props"></a>

| Prop       | Description                                   | Required | Value                                                                  |
| ---------- | --------------------------------------------- | -------- | ---------------------------------------------------------------------- |
| action     | callback function executed on click           | optional | function                                                               |
| color      | text color                                    | optional | white *(default)*, grey, green, red, orange, purple, blue or hex value |
| background | background color                              | optional | green *(default)*, grey, red, orange, purple, blue or hex value        |
| fontSize   | text size                                     | optional | integer                                                                |
| icon       | icon image                                    | optional | string                                                                 |
| iconColor  | icon color                                    | optional | string *(default: white)*                                              |
| iconSize   | icon size                                     | optional | integer *(default: 20)*                                                |
| loading    | toggle loading spinner                        | optional | boolean                                                                |
| params     | object passed to action callback              | optional | object                                                                 |
| style      | custom class                                  | optional | style object                                                           |
| text       | button label                                  | required | string                                                                 |
| url        | internal url to navigate to instead of action | optional | string                                                                 |

## ‌Text Button

Plain text button.

```javascript
<TextButton
  color='red',
  text='Save'
  action={ save }
/>
```

### Props

| Prop   | Description                         | Required | Value                                 |
| ------ | ----------------------------------- | -------- | ------------------------------------- |
| action | callback function executed on click | optional | function                              |
| color  | text color                          | optional | string *(default: Global.color.text)* |
| params | object passed to callback action    | optional | object                                |
| style  | custom style                        | optional | style object                          |
| text   | button label                        | required | string                                |

## Loading Button

If an action takes some time to process, you can pass a loading prop to a `<Button>` component to provide visual feedback to the user.

```javascript
<Button
  loading={ loading }
  text='Click Me'
/>
```

## Icon Button

An icon button with optional text label.

```javascript
<IconButton
  image='save'
  size={ 20 }
  action={ save }
/>
```

### Props

| Prop       | Description                                      | Required | Value                                                 |
| ---------- | ------------------------------------------------ | -------- | ----------------------------------------------------- |
| action     | callback function executed on click              | required | function                                              |
| background | background color                                 | optional | string *(default: transparent)*                       |
| color      | color of the icon                                | optional | dark, light or hex value                              |
| image      | [icon](/gravity-native/components/icon.md) image | required | ​[refer to feather icons](https://feathericons.com/)​ |
| params     | object passed back in the callback               | optional | object                                                |
| size       | icon size                                        | optional | integer (default: 20)                                 |
| style      | custom style                                     | optional | style object                                          |
| text       | button label                                     | required | optional                                              |
| textColor  | text color                                       | optional | string *(default: Global.color.text)*                 |