# Components

Components are stateless rect elements. They render what you pass to them and call function as callbacks. Components are essential part of the app. Here's the list of available components:

### Button

![](https://1070676593-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LK6D3dfAKckmlwkiENO%2F-LK6K7a7QbF4lveow5kV%2F-LK6KnUw8uKH_De1KavM%2Fimage.png?alt=media\&token=4e41ec0b-e9f1-4eaf-9e88-773c0f915a08)

Regular Button can be rendered like this:

```javascript
<Button
  style={styles.demoButton}
  primary
  caption="Button"
  onPress={this.buttonClicked}
/>
```

Button component takes the following props:

| Prop name         | Type     | Description                         |
| ----------------- | -------- | ----------------------------------- |
| `primary`�        | boolean  | Make button BG primary colored      |
| `secondary`       | boolean  | Make button BG secondary colored    |
| `bordered`        | boolean  | Button without bg, but with borders |
| `rounded`         | boolean  | Adds border radius to componen      |
| `small`           | boolean  | Renders small button                |
| `icon`            |          | Icon for the button                 |
| `caption`         | string   | Button's label                      |
| `onPress`         | function | onPress handler                     |
| `bgColor`         | string   | Background color                    |
| `textColor`       | string   | Text color                          |
| `bgGradientStart` | string   | Color of gradient bg start          |
| `bgGradientEnd`   | string   | Color of gradient bg end            |
| `action`          | boolean  | Renders action button               |
| `loading`         | boolean  | Renders loading indicator           |

### Radio Group

Renders a tab-style radio group.

![](https://1070676593-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LK6D3dfAKckmlwkiENO%2F-LK6K7a7QbF4lveow5kV%2F-LK6M4NzgKRL0gpPT8da%2Fimage.png?alt=media\&token=0342f0bb-150f-4c45-b6ba-1ca641eb8a0e)

Can be rendered:

```javascript
<RadioGroup
  style={styles.demoItem}
  items={['One', 'Two', 'Three']}
  selectedIndex={props.radioGroupsState[0]}
  onChange={index => props.setRadioGroupsState({ ...props.radioGroupsState, 0: index })}
/>
```

Component's props:

| Prop name       | Type           | Description                                    |
| --------------- | -------------- | ---------------------------------------------- |
| `items`         | array\[string] | Items to render on the Radio button            |
| `secondary`     | boolean        | Renders secondary-styles radio group           |
| `rounded`       | boolean        | Renders radio group with rounded corners       |
| `underline`     | boolean        | Renders underline-styled radio button          |
| `onChange`      | function       | Called when the button in the group is clicked |
| `selectedIndex` | number         | Index of selected item                         |

### Dropdown

![](https://1070676593-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LK6D3dfAKckmlwkiENO%2F-LK6K7a7QbF4lveow5kV%2F-LK6MpKBFSEdLQWGZJlL%2Fimage.png?alt=media\&token=ffb460c2-b7d4-4089-831a-17f95aebc7da)

Use the dropdown this way:

```javascript
<Dropdown
  onSelect={() => {}}
  items={['option 1', 'option 2']}
/>
```

Dropdown's props:

| Prop name  | Type           | Description                                     |
| ---------- | -------------- | ----------------------------------------------- |
| `onSelect` | function       | Callback that called after the item is selected |
| `items`    | array\[string] | Items for the dropdown                          |