# be-button

> An advance button component that should render nicely on any platform. Supports a great level of customization.

Latest version **1.0.2** (published 2019-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install be-button
pnpm add be-button
yarn add be-button
bun add be-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-09-01 |
| First published | 2019-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Abed Allateef Qaisi abed_q@hotmail.com |
| Maintainers | lockcommerce |
| Keywords | react-native, react-component, react-native-component, react, react native, mobile, ios, android, ui, expo, Button, advance button, native button, blue eye button, react native button, expo button |

## Links

- npm: https://www.npmjs.com/package/be-button
- Repository: https://github.com/abodehq/blue-eye
- Homepage: https://abodehq.github.io/blue-eye-docs/
- Issues: https://github.com/abodehq/blue-eye/issues
- npm.io page: https://npm.io/package/be-button

## Dependencies (2)

- [be-icon](https://npm.io/package/be-icon.md) ^1.0.0
- [be-theme](https://npm.io/package/be-theme.md) ^1.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2019-09-01
- 1.0.1 — 2019-09-01
- 1.0.0 — 2019-08-29

## README

---
title: Button
description: How to add interactive quizzes to your site.
---

# Button

An advance button component that should render nicely on any platform. Supports a great level of customization.

<p align="center">
 <img src="https://i.imgur.com/JjkraTc.png" />
</p>

## Installation

Since the library is a JS-based solution, to install the latest version of `be-button` you only need to run:

```bash
npm install --save be-button
```

or

```bash
yarn add be-button
```

**Examples**

> Basic :

```jsx
import Button from "be-button";
---
<Button onPress={() => console.log("Button Pressed")}>
    Learn More
</Button>
```

<img src="https://i.imgur.com/eDTf1Wn.jpg" alt="Basic" style="width:150px" />

> Outline :

```jsx
import Button from "be-button";
---
<Button outline onPress={() => console.log("Button Pressed")}>
    Learn More
</Button>
```

<img src="https://i.imgur.com/hDVY5m3.jpg" alt="Basic" style="width:150px" />

> advance :

```jsx
import Button from "be-button";
---
 <Button
    color="error"
    textColor="black"
    textStyle={ { fontSize: 30 } }
    containerStyle={ { padding: 60, borderStyle: "dashed" } }
    borderColor="#666"
    borderWidth={6}
    radius={25}
    opacity={0.5}
    textTransform="uppercase"
    onPress={() => console.log("Button Pressed")}
    >
    Learn More
</Button>
```

<img src="https://i.imgur.com/CoGNUtO.jpg" alt="Basic" style="width:150px" />

> With Icon :

```jsx
import Button from "be-button";
import Icon, { RegularIcons } from "be-icon";
---
<Button
    icon={<Icon icon={RegularIcons.smileWink} style={ { paddingRight: 10 } } />}
    color="transparent"
    containerStyle={ {  width: "100%", height: 100 } }
    borderColor="primary"
    borderWidth={1}
    textColor="primary"
    onPress={() => console.log("Button Pressed")}
    >
    NICE !!
</Button>
```

<img src="https://i.imgur.com/iAxBFsU.jpg" alt="Basic" style="width:350px" />

> loading :

```jsx
import Button from "be-button";
---
<Button
    loading
    loadingColor="error"
    loadingSize="large"
    color="transparent"
    containerStyle={ { borderStyle: "dashed" } }
    borderColor="error"
    borderWidth={1}
    radius={40}
    onPress={() => console.log("Button Pressed")}
/>
```

<img src="https://i.imgur.com/oBKCU3r.jpg" alt="Basic" style="width:150px" />

> Custom Content :

```jsx
import Button from "be-button";
import { Image } from "react-native";
---
<Button
    color="transparent"
    containerStyle={ { width: 100, height: 100 } }
    borderColor="#ff9900"
    borderWidth={1}
    onPress={() => console.log("Button Pressed")}
    >
    <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/Ksp1jHy.png" } } />
</Button>
```

<img src="https://i.imgur.com/CPxohym.jpg" alt="Basic" style="width:150px" />

> TouchableHighlight :

```jsx
import Button from "be-button";
import { Image } from "react-native";
---
<Button
    type="TouchableHighlight"
    opacity={1}
    onShowUnderlay={() =>
    <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/dNSN9D7.png" } } />}
    underlayStyle={ { width: 105, height: 105 } }
    containerStyle={ { width: 100, height: 100 } }
    borderColor="#ff9900"
    underlayColor="success"
    borderWidth={1}
    onPress={() => console.log("Button Pressed")}
    >
    <Image style={ { width: 50, height: 50 } } source={ { uri: "https://i.imgur.com/LgkZkOG.png" } } />
</Button>
```

<table  style="border: none !important;">
<tr><td style="width:200px">Unpressed </td><td>Pressed</td></tr>
<tr><td>
<img src="https://i.imgur.com/FaNgc3z.jpg" alt="Basic" style="width:100px" />
</td><td>
<img src="https://i.imgur.com/42ECqBb.jpg" alt="Basic" style="width:100px" />
</td></tr>
</table>

### Props

- [`onPress`](button#onpress)
- [`type`](button#type)
- [`containerStyle`](button#containerstyle)
- [`color`](button#color)
- [`textColor`](button#textcolor)
- [`textTransform`](button#texttransform)
- [`textStyle`](button#textstyle)
- [`borderColor`](button#bordercolor)
- [`borderWidth`](button#borderwidth)
- [`radius`](button#radius)
- [`disabled`](button#disabled)
- [`shadow`](button#shadow)
- [`outline`](button#outline)
- [`opacity`](button#opacity)
- [`loading`](button#loading)
- [`loadingColor`](button#loadingcolor)
- [`loadingSize`](button#loadingsize)
- [`underlayColor`](button#underlaycolor)
- [`underlayStyle`](button#underlaystyle)

---

# Reference

### `onPress`

Handler to be called when the user taps the button

| Type     | Required |
| -------- | -------- |
| function | Yes      |

### `type`

**TouchableOpacity** selected by default, so when press Button down, the opacity of the wrapped view is decreased, dimming it.
if you want to change the background color or even the entire component when you press the button down then you need to change the type to **TouchableHighlight**

| Type                                | Required | Default          |
| ----------------------------------- | -------- | ---------------- |
| TouchableOpacity,TouchableHighlight | No       | TouchableOpacity |

### `containerStyle`

override button container style for example if you want to change width,height,padding,....

| Type  | Required |
| ----- | -------- |
| style | No       |

### `color`

Background color of the button

| Type                                     | Required | Default |
| ---------------------------------------- | -------- | ------- |
| [be-color](../../guides/color-reference) | No       | primary |

### `textColor`

Text color of the button ( only if the children is string)

| Type                                     | Required | Default                                        |
| ---------------------------------------- | -------- | ---------------------------------------------- |
| [be-color](../../guides/color-reference) | No       | white in default case, primary in outline mode |

### `textTransform`

set Text Transform ( only if the children is string)

| Type                                  | Required | Default |
| ------------------------------------- | -------- | ------- |
| 'lowercase', 'uppercase','capitalize' | No       | Not Set |

### `textStyle`

override button text style for example if you want to change fontSize,... ( only if the children is string)

| Type  | Required |
| ----- | -------- |
| style | No       |

### `borderColor`

border color of the button , will active if the borderWidth prop great than 0 or the button outline prop set to true

| Type                                     | Required | Default |
| ---------------------------------------- | -------- | ------- |
| [be-color](../../guides/color-reference) | No       | primary |

### `borderWidth`

border width of the button you can change border style using containerStyle prop

| Type   | Required | Default                    |
| ------ | -------- | -------------------------- |
| Number | No       | BETheme.SIZES.BORDER_WIDTH |

### `radius`

Button border radius of the button to make it circle you need to set width = height & radius = button width / 2

| Type   | Required | Default                     |
| ------ | -------- | --------------------------- |
| Number | No       | BETheme.SIZES.BORDER_RADIUS |

### `disabled`

If true, disable all interactions for this component.

| Type | Required | Default |
| ---- | -------- | ------- |
| bool | No       | false   |

### `shadow`

If true, show shadow effect for this component.

| Type | Required | Default |
| ---- | -------- | ------- |
| bool | No       | false   |

### `outline`

If true make an outline button,by set the default text color to primary set background color to transparent and finally set border width to 1, you can ovveride these styles.

| Type | Required | Default |
| ---- | -------- | ------- |
| bool | No       | false   |

### `opacity`

Determines what the opacity of the Button should be when touch is active.

| Type   | Required | Default               |
| ------ | -------- | --------------------- |
| Number | No       | BETheme.SIZES.OPACITY |

### `loading`

If true we show react native activity indicator instead of the button content.

| Type | Required | Default |
| ---- | -------- | ------- |
| bool | No       | false   |

### `loadingColor`

set Loading indicator color , will active if loading prop set to true

| Type                                     | Required | Default |
| ---------------------------------------- | -------- | ------- |
| [be-color](../../guides/color-reference) | No       | primary |

### `loadingSize`

Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.

| Type                          | Required | Default |
| ----------------------------- | -------- | ------- |
| enum('small', 'large'),number | No       | small   |

### `underlayColor`

Background color of the button when pressed , only if the button type is **TouchableHighlight**

| Type                                     | Required | Default |
| ---------------------------------------- | -------- | ------- |
| [be-color](../../guides/color-reference) | No       | primary |

### `underlayStyle`

override button container style when pressed **this will keep the container styles and push the new style** , only if the button type is **TouchableHighlight**

| Type  | Required |
| ----- | -------- |
| style | No       |

---
_Source: https://npm.io/package/be-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._