# @anypoint-web-components/anypoint-button

> Anypoint styled button.

Latest version **1.2.4** (published 2021-10-15) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @anypoint-web-components/anypoint-button
pnpm add @anypoint-web-components/anypoint-button
yarn add @anypoint-web-components/anypoint-button
bun add @anypoint-web-components/anypoint-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.2.4 |
| Published | 2021-10-15 |
| First published | 2019-06-24 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 40.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Pawel Uchida-Psztyc |
| Maintainers | jarrodek, twoplustwoone, lbauret, carowright |
| Keywords | web-components, anypoint, button |

## Links

- npm: https://www.npmjs.com/package/@anypoint-web-components/anypoint-button
- Repository: https://github.com/anypoint-components/anypoint-button
- Homepage: https://github.com/anypoint-components/anypoint-button#readme
- Issues: https://github.com/anypoint-components/anypoint-button/issues
- npm.io page: https://npm.io/package/@anypoint-web-components/anypoint-button

## Dependencies (3)

- [lit-element](https://npm.io/package/lit-element.md) ^2.5.1
- [@anypoint-web-components/material-ripple](https://npm.io/package/@anypoint-web-components/material-ripple.md) ^1.0.3
- [@anypoint-web-components/anypoint-control-mixins](https://npm.io/package/@anypoint-web-components/anypoint-control-mixins.md) ^1.2.0

## Recent versions

- 1.2.4 (latest) — 2021-10-15
- 1.2.3 — 2021-09-01
- 1.2.2 — 2021-07-07
- 1.2.1 — 2021-05-30
- 1.2.0 — 2021-01-30
- 1.1.1 — 2020-05-06
- 1.1.0 — 2020-05-06
- 1.0.15 — 2019-12-03
- 1.0.14 — 2019-11-20
- 1.0.13 — 2019-11-20
- 1.0.12 — 2019-10-11
- 1.0.11 — 2019-09-06
- 1.0.10 — 2019-08-30
- 1.0.9 — 2019-08-28
- 1.0.8 — 2019-08-28
- … 8 more at https://npm.io/package/@anypoint-web-components/anypoint-button/versions

## README

# Deprecated

This component has been moved to `anypoint-web-components/awc`.

====

Anypoint and Material Design styled button.

Anypoint button by default is styled for Anypoint platform. Styles can be controlled by using `emphasis` property ans CSS variables.

`emphasis` can be one of `low`, `middle`, or `high`. Styles for each of it can be redefined using CSS variables.
Low emphasis button should be used for less important actions.
Medium emphasis should be used for secondary actions.
High emphasis should be used for primary action, not very often, ideally one per screen.

[![Published on NPM](https://img.shields.io/npm/v/@anypoint-web-components/anypoint-button.svg)](https://www.npmjs.com/package/@anypoint-web-components/anypoint-button)


[![tests](https://github.com/anypoint-web-components/anypoint-button/actions/workflows/deployment.yml/badge.svg)](https://github.com/anypoint-web-components/anypoint-button/actions/workflows/deployment.yml)

## Usage

### Installation

```sh
npm install @anypoint-web-components/anypoint-button --save
```

### In a HTML document

```html
<script type="module" src="@anypoint-web-components/anypoint-button/anypoint-button.js"></script>
<script type="module" src="@anypoint-web-components/anypoint-button/anypoint-icon-button.js"></script>

<anypoint-button emphasis="low">Low emphasis</anypoint-button>
<anypoint-button emphasis="medium">Medium emphasis</anypoint-button>
<anypoint-button emphasis="high">High emphasis</anypoint-button>
<anypoint-button toggles>Button that toggles</anypoint-button>
<anypoint-button disabled>You can't click me</anypoint-button>

<anypoint-icon-button emphasis="low">
  <my-icon icon="alarm-add"></my-icon>
</anypoint-icon-button>
```

### In a LitElement

```js
import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-button/anypoint-button.js';
import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';

class SimpleElement extends LitElement {
  render() {
    return html`
    <anypoint-button emphasis="low">Low emphasis</anypoint-button>
    <anypoint-button emphasis="medium">Medium emphasis</anypoint-button>
    <anypoint-button emphasis="high">High emphasis</anypoint-button>
    <anypoint-button toggles>Button that toggles</anypoint-button>
    <anypoint-button disabled>You can't click me</anypoint-button>

    <anypoint-icon-button emphasis="low">
      <my-icon icon="alarm-add"></my-icon>
    </anypoint-icon-button>
    `;
  }
}
window.customElements.define('simple-element', SimpleElement);
```

### Development

```sh
git clone https://github.com/anypoint-web-components/anypoint-button
cd anypoint-button
npm install
```

### Running the demo locally

```sh
npm start
```

### Running the tests

```sh
npm test
```

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