# tv-button

> buttons for nuxtjs powered by tailwindcss

Latest version **2.0.7** (published 2021-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install tv-button
pnpm add tv-button
yarn add tv-button
bun add tv-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 | 2.0.7 |
| Published | 2021-10-22 |
| First published | 2020-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 447.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | kevin olson |
| Maintainers | acidjazz |
| Keywords | vue, vuejs, tailwindcss, button |

## Links

- npm: https://www.npmjs.com/package/tv-button
- Repository: https://github.com/acidjazz/tv-button
- Homepage: https://github.com/acidjazz/tv-button#readme
- Issues: https://github.com/acidjazz/tv-button/issues
- npm.io page: https://npm.io/package/tv-button

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.0.7 (latest) — 2021-10-22
- 2.0.6 — 2021-10-22
- 2.0.5 — 2021-10-22
- 2.0.4 — 2021-10-20
- 2.0.3 — 2021-10-20
- 2.0.2 — 2021-07-20
- 2.0.1 — 2021-07-20
- 2.0.0 — 2021-07-20
- 1.0.45 — 2021-06-12
- 1.0.44 — 2021-06-12
- 1.0.43 — 2021-06-12
- 1.0.42 — 2021-05-28
- 1.0.41 — 2021-05-23
- 1.0.40 — 2021-05-23
- 1.0.39 — 2021-05-23
- … 40 more at https://npm.io/package/tv-button/versions

## README

<p align="center">
  <img src="media/buttons.gif" width="600" />
</p>

[![](https://img.shields.io/npm/v/tv-button.svg?logo=npm&style=flat-square)](https://www.npmjs.com/package/tv-button)
[![](https://img.shields.io/badge/nuxt.js-module-04C690.svg?style=flat-square)](https://nuxtjs.org)
![Test Javascript](https://github.com/acidjazz/tv-button/workflows/Test%20Javascript/badge.svg)
[![](https://img.shields.io/npm/dt/tv-button.svg?style=flat-square)](https://www.npmjs.com/package/tv-button)
[![](https://img.shields.io/github/license/acidjazz/tv-button?style=flat-square)](https://www.npmjs.com/package-tv-button)
<!-- [![](https://img.shields.io/badge/chat-on%20discord-7289DA.svg?logo=discord&style=flat-square)](https://discord.gg/enn4S6) -->

> This requires [Nuxt.js](https://nuxtjs.org) with the [Tailwind CSS](https://tailwindcss.nuxtjs.org) module

## Quick Setup
1. Add the `nuxt-tailvue` dependency to your Nuxt.js project
```bash
npm install nuxt-tailvue
# OR
yarn add nuxt-tailvue
```

2. Add `button` to the `modules` section of `nuxt.config.js`
```js
{
  modules: [
    ['nuxt-tailvue', {button: true}],
  ]
}
```

3. If you're using [Purge](https://tailwindcss.com/docs/controlling-file-size), add this module to the content section of `tailwind.config.js`

```js
module.exports = {
    content: [
      'node_modules/tv-*/dist/tv-*.umd.min.js',
  }
```


## Features

### ButtonGroup component
 - Works with themes

![](media/group1.png?raw=true)

```html
  <ButtonGroup>
    <PushButton group="left">
      left
    </PushButton>
    <PushButton group="middle">
      middle
    </PushButton>
    <PushButton group="right">
      right
    </PushButton>
  </ButtonGroup>
```

### Combine with [tv-icon](https://github.com/acidjazz/tv-icon)

![](media/paired.png?raw=true)

```html
<PushButton>
    <IconCheck class="w-5 h-5 mr-2" primary="text-green-300" secondary="text-green-400"/>
    Pair with Icons
</PushButton>
```

### Use as a nuxt-link
- Button turns into a [<nuxt-link>](https://nuxtjs.org/api/components-nuxt-link/) for proper navigation

```html
<PushButton to="/about">
  About Us
</PushButton>
```

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