# lit-button

> Dead simple lit-element button

Latest version **4.2.0** (published 2020-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install lit-button
pnpm add lit-button
yarn add lit-button
bun add lit-button
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.2.0 |
| Published | 2020-06-19 |
| First published | 2019-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10.0.0 |
| Dependencies | 0 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mgen |
| Maintainers | mgenware |
| Keywords | lit-element |

## Links

- npm: https://www.npmjs.com/package/lit-button
- Repository: https://github.com/mgenware/lit-button
- Issues: https://github.com/mgenware/lit-button/issues
- npm.io page: https://npm.io/package/lit-button

## Recent versions

- 4.2.0 (latest) — 2020-06-19
- 4.1.0 — 2020-06-06
- 4.0.1 — 2020-06-06
- 4.0.0 — 2020-06-05
- 3.5.0 — 2020-02-23
- 3.4.0 — 2020-02-09
- 3.3.0 — 2020-02-01
- 3.2.0 — 2020-01-11
- 3.1.5 — 2019-12-19
- 3.1.4 — 2019-12-15
- 3.1.2 — 2019-12-15
- 3.1.1 — 2019-12-12
- 3.1.0 — 2019-12-11
- 3.0.1 — 2019-11-11
- 3.0.0 — 2019-11-11
- … 7 more at https://npm.io/package/lit-button/versions

## README

# lit-button

[![Build Status](https://github.com/mgenware/lit-button/workflows/Build/badge.svg)](https://github.com/mgenware/lit-button/actions)
[![npm version](https://img.shields.io/npm/v/lit-button.svg?style=flat-square)](https://npmjs.com/package/lit-button)
[![Node.js Version](http://img.shields.io/node/v/lit-button.svg?style=flat-square)](https://nodejs.org/en/)

Dead simple lit-element button

## Installation

```sh
yarn add lit-button
```

## Usage

### Properties

- `disabled: boolean` indicates whether the button is disabled.
- `autofocus: boolean` indicates whether the button is focused when the page loads.
- `href: string` navigates to the given URL when clicked on.

### CSS Shadow Parts

- `button` the underlying button.

```css
lit-button.colored-border::part(button) {
  border: 4px solid yellowgreen;
  border-radius: 10px;
}
```

### CSS Variables

lit-button also has some CSS variables for quick customization.

`--button-outline-color` focus outline color, defaults to `8dc3eb`.

### Examples

```js
html`
  <lit-button @click=${() => alert('Hello world')}>Default</lit-button>
  <lit-button disabled>Disabled</lit-button>
  <lit-button autofocus>Auto-focused</lit-button>
`;
```

### Build Instructions

- `yarn dev` builds the project in dev mode
- `yarn build` builds and lints the project in production mode
- `yarn serve` runs a demo page in browser (you have to build the project first)
- `yarn test` runs UI tests

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