# @chameleon-ds/button

> Chameleon button

Latest version **2.0.1** (published 2020-06-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chameleon-ds/button
pnpm add @chameleon-ds/button
yarn add @chameleon-ds/button
bun add @chameleon-ds/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 | 2.0.1 |
| Published | 2020-06-22 |
| First published | 2019-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | Maritz Motivation Solutions, Inc. |
| Maintainers | kewalter, mandymichel, olerk16, ryuhhnn, tfreiner, zemptime |

## Links

- npm: https://www.npmjs.com/package/@chameleon-ds/button
- Repository: https://github.com/MaritzSTL/chameleon
- Homepage: https://github.com/MaritzSTL/chameleon/tree/master/packages/button#readme
- Issues: https://github.com/MaritzSTL/chameleon/issues
- npm.io page: https://npm.io/package/@chameleon-ds/button

## Dependencies (2)

- [lit-element](https://npm.io/package/lit-element.md) ^2.2.1
- [@chameleon-ds/loader](https://npm.io/package/@chameleon-ds/loader.md) ^2.0.1

## Recent versions

- 2.0.1 (latest) — 2020-06-22
- 2.0.0 — 2020-06-18
- 1.4.7 — 2020-06-01
- 1.4.6 — 2020-05-29
- 1.4.5 — 2020-05-13
- 1.4.2 — 2020-05-07
- 1.4.1 — 2020-05-07
- 1.4.0 — 2020-04-30
- 1.3.9 — 2020-04-03
- 1.3.6 — 2020-03-11
- 1.3.5 — 2019-12-17
- 1.3.4 — 2019-12-05
- 1.3.3 — 2019-11-26
- 1.3.2 — 2019-11-21
- 1.3.1 — 2019-11-21
- … 24 more at https://npm.io/package/@chameleon-ds/button/versions

## README

# Chameleon Button

```js script
import { html, svg } from "lit-html";
import "./chameleon-button.js";

export default {
  title: "Components|Buttons/Button",
  component: "chameleon-button",
  options: { selectedPanel: "storybookjs/docs/panel" },
};
```

## Properties

| Property Name | Type(s) | Default Value | Description                                                 |
| ------------- | ------- | ------------- | ----------------------------------------------------------- |
| `disabled`    | Boolean | `false`       | Whether or not the button is disabled                       |
| `loading`     | Boolean | `false`       | When true, a loading spinner will display                   |
| `theme`       | String  | `"primary"`   | The theme of the button ("primary", "secondary", or "text") |
| `icon-left`   | Boolean | `false`       | When true, will display a left icon                         |
| `icon-right`  | Boolean | `false`       | When true, will display a right icon                        |
| `icon-only`   | Boolean | `false`       | When true, will display only an icon                        |
| `href`        | String  | `null`        | The link href                                               |
| `target`      | String  | `"_top"`      | The link target                                             |

## Examples

### Default

```js preview-story
export const Default = () => html`<chameleon-button>Login</chameleon-button>`;
```

### Secondary Theme

```js preview-story
export const SecondaryTheme = () =>
  html`<chameleon-button theme="secondary">Login</chameleon-button>`;
```

### Text Theme

```js preview-story
export const TextTheme = () =>
  html`<chameleon-button theme="text">Login</chameleon-button>`;
```

### Text with Icon

```js preview-story
const heartIconLeft = svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart" slot="icon-left"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;

export const TextWithIcon = () =>
  html`<chameleon-button theme="text" icon-left
    >${heartIconLeft} Love</chameleon-button
  >`;
```

### Icon Only

```js preview-story
const heartIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart" slot="icon-left"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;

export const IconOnly = () =>
  html`<chameleon-button theme="text" icon-only
    >${heartIcon}</chameleon-button
  >`;
```

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