> 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)*                 |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.usegravity.app/gravity-native/components/button.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.