# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.