# 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="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2Faat8zPC0avt9CDKDmpJL%2Fbutton.png?alt=media&#x26;token=52f892dc-8e59-4fec-8901-ad3bf19e75ba" 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](https://docs.usegravity.app/gravity-native/components/icon) 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)*                 |