# native-x-button

> Tappable button implementation

Latest version **1.0.12** (published 2021-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install native-x-button
pnpm add native-x-button
yarn add native-x-button
bun add native-x-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.12 |
| Published | 2021-08-10 |
| First published | 2021-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Rinto Jose |
| Maintainers | rintoj |

## Links

- npm: https://www.npmjs.com/package/native-x-button
- Repository: https://github.com/rintoj/native-x-button
- Homepage: https://github.com/rintoj/native-x-button#readme
- Issues: https://github.com/rintoj/native-x-button/issues
- npm.io page: https://npm.io/package/native-x-button

## Dependencies (3)

- [native-x-theme](https://npm.io/package/native-x-theme.md) ^1.0.10
- [native-x-tappable](https://npm.io/package/native-x-tappable.md) ^1.0.4
- [tachyons-react-native](https://npm.io/package/tachyons-react-native.md) ^1.0.4

## Recent versions

- 1.0.12 (latest) — 2021-08-10
- 1.0.11 — 2021-08-10
- 1.0.10 — 2021-07-08
- 1.0.9 — 2021-06-08
- 1.0.8 — 2021-06-08
- 1.0.7 — 2021-06-03
- 1.0.6 — 2021-05-20
- 1.0.5 — 2021-02-15
- 1.0.4 — 2021-02-12
- 1.0.3 — 2021-02-12
- 1.0.2 — 2021-02-06
- 1.0.1 — 2021-02-05
- 1.0.0 — 2021-02-05

## README

# native-x-button

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

This helps you add interactive buttons. This module works with `native-x-theme` package.

## Install

### Yarn

```sh
yarn add native-x-button
```

### NPM

```sh
npm install native-x-button
```

## Usage

```tsx
import { Button } from 'native-x-button'

function MyComponent() {
  return (
    <Stack>
      <Button>Click Me</Button>
      <Button outline>Click Me</Button>
      <Button clear>Click Me</Button>
      ...
      <Button rounded>Click Me</Button>
      <Button rounded outline>
        Click Me
      </Button>
      ...
      <Button loading>Click Me</Button>
      <Button rounded loading>
        Click Me
      </Button>
      <Button icon={<Icon name='trash' />}>Delete</Button>
    </Stack>
  )
}
```

## DEMO

| Button Types               | Button Sizes               | Colors / Disabled          |
| -------------------------- | -------------------------- | -------------------------- |
| ![DEMO1](./docs/demo1.png) | ![DEMO2](./docs/demo2.png) | ![DEMO3](./docs/demo3.png) |

## API

| Property                     | Default Value | Usage                                                          |
| ---------------------------- | ------------- | -------------------------------------------------------------- |
| disabled?: boolean           | false         | Disable the user interaction and change visual appearance      |
| outline?: boolean            | false         | Button with no background but with border color                |
| clear?: boolean              | false         | Button with no background and border color                     |
| rounded?: boolean            | false         | Show rounded corners                                           |
| loading?: boolean            | false         | Show a spinner                                                 |
| icon?: ReactNode             |               | Show an icon                                                   |
| size?: string                | 'normal'      | Valid values: 'x-small', 'small', 'normal', 'large', 'x-large' |
| backgroundColor?: string     | COLOR.ACCENT  | Any valid name of the color defined by ThemeProvider           |
| textColor?: string           | COLOR.PRIMARY | Any valid name of the color defined by ThemeProvider           |
| borderColor?: string         | COLOR.DIVIDER | Any valid name of the color defined by ThemeProvider           |
| fill?: boolean               |               | Fill the container horizontally and vertically                 |
| fillHorizontal?: boolean     |               | Fill the container horizontally                                |
| width?: number               |               | Width of the button                                            |
| height?: number              |               | Height of the button                                           |
| minWidth?: number            |               | Minimum width of the button                                    |
| minHeight?: number           |               | Minimum height of the button                                   |
| maxWidth?: number            |               | Maximum width of the button                                    |
| maxHeight?: number           |               | Maximum height of the button                                   |
| onTap: (data: TData) => void |               | Action handler for user interaction                            |
| data: TData                  | undefined     | Optional data                                                  |

## Automatic Release

Here is an example of the release type that will be done based on a commit messages:

| Commit message      | Release type          |
| ------------------- | --------------------- |
| fix: [comment]      | Patch Release         |
| feat: [comment]     | Minor Feature Release |
| perf: [comment]     | Major Feature Release |
| doc: [comment]      | No Release            |
| refactor: [comment] | No Release            |
| chore: [comment]    | No Release            |

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