# @fotihose/button

> A simple button

Latest version **1.1.0** (published 2022-06-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fotihose/button
pnpm add @fotihose/button
yarn add @fotihose/button
bun add @fotihose/button
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-06-30 |
| First published | 2021-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 73.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andreas Larssen |
| Maintainers | erichjsonfosse, andreaslarssen |
| Keywords | angular, button, fotihose, ngx |

## Links

- npm: https://www.npmjs.com/package/@fotihose/button
- Repository: https://github.com/halloverden/fotihose/tree/main/projects/fih-button
- Homepage: https://github.com/halloverden/fotihose/tree/main/projects/fih-button#readme
- Issues: https://github.com/halloverden/fotihose/issues
- npm.io page: https://npm.io/package/@fotihose/button

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [@fotihose/loading-indicator](https://npm.io/package/@fotihose/loading-indicator.md) ^1.1.0

## Recent versions

- 1.1.0 (latest) — 2022-06-30
- 1.1.0-rc.2 — 2022-06-30
- 1.1.0-rc.1 — 2022-06-30
- 1.0.1 — 2021-10-02
- 1.0.0 — 2021-10-02

## README

# Button

This component is part of the [Fotihose](https://github.com/halloverden/fotihose) network, which is a network of standalone components.

## Description
A simple wrapper for a native button element that shows a loading indicator in the button when prompted. 

## Installation
```
npm i @fotihose/button -S
```

## Usage

Add #button to the button, so the component knows what element is the button. Woah, poetry! 

```html
  <fih-button loadingIndicatorColor="#fff" [loadingIndicatorSize]="20" [processing]=true>
    <button #button></button>
  </fih-button>
```

### Inputs

| Input                   | Type     | Default  | Description |
|-------------------------|:--------:|:--------:|:-----------:|
| loadingIndicatorColor   | string   | #000     | Color of the loading indicator (hex)
| loadingIndicatorSize    | number   | 15       | Size of the loading indicator (px)
| processing              | boolean  | false    | When true, it shows a loading indicator

### Outputs

No outputs

## TODO
- Keep button aspect ratio when processing

## License
MIT

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