# @mandala-ui/button

> Mandala UI Kit Button Component

Latest version **1.0.4** (published 2018-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mandala-ui/button
pnpm add @mandala-ui/button
yarn add @mandala-ui/button
bun add @mandala-ui/button
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-04-06 |
| First published | 2018-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lucas K Allmon |
| Maintainers | lucaska |
| Keywords | react, css, library, components, interface, functional, OOCSS, declarative, ui, user, ux |

## Links

- npm: https://www.npmjs.com/package/@mandala-ui/button
- npm.io page: https://npm.io/package/@mandala-ui/button

## Dependencies (1)

- [lodash.clamp](https://npm.io/package/lodash.clamp.md) ^4.0.3

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-04-06
- 1.0.3 — 2018-03-31
- 1.0.2 — 2018-03-29
- 1.0.1 — 2018-03-12
- 1.0.0 — 2018-03-12
- 0.0.16 — 2018-03-07
- 0.0.15 — 2018-03-07
- 0.0.14 — 2018-02-01

## README

# Mandala UI Button
Mandala is a React component library that utilizes a declarative CSS.

### Installation

Check the [Monorepo README](https://github.com/mandala-ui/mandala) for installation.

### Usage
if using the whole library:
```js
import { Button } from 'mandala';
```
if only using this component:
```js
import Button from '@mandala-ui/button';
```

### Props
* `children` - Whatever node you would like in your button. Use this to add icons or customize text color inside.
* `color` - color string for the background color of the button
* `disabled` - disables clicking and reduces the opacity by 60%
* `onClick` - click callback handler
* `pill` -  gives the button 100% radius
* `radius` - border radius, from 0-4, will not work if `pill` is `true`

| propName | propType | defaultValue | isRequired |
| -------- | -------- | ------------ | ---------- |
| children | node     | null         | -          |
| color    | string   | black        | -          |
| disabled | boolean  | false        | -          |
| onClick  | func     | null         | -          |
| pill     | boolean  | false        | -          |
| radius   | number   | 0            | -          |

![mandala-bottom](https://user-images.githubusercontent.com/1824267/38281372-32114e5c-375f-11e8-9fbe-e5191b96429c.png)

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