# Buttons and Touchable

### Btn (Button)

**Sample**

```jsx
<Btn label={'Primary Button'} />

<Btn label={'Secondary Button'} type="secondary" />

<Btn label={'Warning Button'} type="warning" />

<Btn label={'Light Button'} type="light" />

<Btn label={'Success Button'} type="success" />

<Btn label={'Primary Outline Button'} type="primary-outline" />

<Btn label={'Secondary Outline Button'} type="secondary-outline" />

<Btn label={'Warning Outline Button'} type="warning-outline" />

<Btn label={'Light Outline Button'} type="light-outline" />

<Btn label={'Success Outline Button'} type="success-outline" />

<Btn label={'Primary Button'} block={false} />

<Btn label={'Primary Outline Button'} type={'primary-outline'} block={false} />

```

| Props   | Type     | Description                                                                                                                                  |
| ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| label   | String   |                                                                                                                                              |
| onPress | Function |                                                                                                                                              |
| type    | String   | <p>secondary, warning, light, success, primary-outline, </p><p>secondary-outline, warning-outline, light-outline, </p><p>success-outline</p> |
| block   | Boolean  |                                                                                                                                              |

#### Output

{% hint style="info" %}
Note: `Btn` doesn't have a default spacing from bottom. Out captured with a `Space` component. If you want space after `Btn` component use `Space`.&#x20;
{% endhint %}

![](https://3191317198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXqItWiS6ABccRINSZ%2F-MHwSpwCFpQaODez-6mU%2F-MHyr8tpeMG8zkfM3QQK%2FScreenshot%202020-09-24%20at%2011.44.24%20AM.png?alt=media\&token=1adbe5c3-2e76-4178-a6fe-f8522ed4d4f0)

### IconBtn

**Sample**

```jsx
<IconBtn 
	icon={'user'}
	onPress={() => console.log('do something')}
/>

<IconBtn 
	icon={'shopping-cart'}
	onPress={() => console.log('do something')}
	badge={1}
/>
```

**Output**

![](https://3191317198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXqItWiS6ABccRINSZ%2F-MHwSpwCFpQaODez-6mU%2F-MHyufnQi0l2bmOH53xg%2FScreenshot%202020-09-24%20at%2011.55.30%20AM.png?alt=media\&token=74c11113-9696-4480-8ded-658d06495599)