# @teft/buttons

> Buttons for Teft.

Latest version **5.1.3** (published 2024-05-21) · GPL-2.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @teft/buttons
pnpm add @teft/buttons
yarn add @teft/buttons
bun add @teft/buttons
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.1.3 |
| Published | 2024-05-21 |
| First published | 2019-06-12 |
| Weekly downloads | 0 |
| License | GPL-2.0-or-later |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dekode Interaktiv AS |
| Maintainers | stian-overasen, peroks, walbo, olethomas |
| Keywords | teft, buttons |

## Links

- npm: https://www.npmjs.com/package/@teft/buttons
- Repository: https://github.com/DekodeInteraktiv/teft
- Homepage: https://github.com/DekodeInteraktiv/teft/tree/master/packages/buttons/README.md
- Issues: https://github.com/DekodeInteraktiv/teft/issues
- npm.io page: https://npm.io/package/@teft/buttons

## Recent versions

- 5.1.3 (latest) — 2024-05-21
- 5.1.0 (next) — 2024-03-03
- 5.1.2 — 2024-03-03
- 5.0.3 — 2024-03-01
- 1.0.0 — 2020-08-12
- 0.1.0-alpha.0 — 2019-11-12
- 0.0.4 — 2019-09-12
- 0.0.3 — 2019-06-26
- 0.0.2 — 2019-06-17
- 0.0.1 — 2019-06-12

## README

<!--docs:
title: Buttons
section: components
path: /packages/buttons/
-->

# Buttons

Teft styling for WordPress Buttons Block buttons and custom buttons with the `.teft-button` class. Override default WordPress colors, sizing and border radius with Teft custom properties.

## Installation
Install the module

```bash
npm install @teft/buttons
```

## Variables

|Name|Default value|Explanation|
|-|-|-|
|`--teft-buttons-primary-color`|`var(--teft-theme-primary-color, #1897ec)`|Background color for primary button. Inherit color from theme package.|
|`--teft-buttons-text-color`|`var(--teft-theme-on-primary-color, #fff)`|Text color for primary button. Inherit color from theme package.|
|`--teft-buttons-outlined-color`|`var(--teft-buttons-primary-color)`|Text and border color for button with outlined style.|
|`--teft-buttons-disabled-color`|`var(--teft-theme-disabled-color, #ccc)`|Background color for disabled buttons. Inherit color from theme package.|
|`--teft-buttons-disabled-text-color`|`var(--teft-theme-on-primary-color, #fff)`|Text color for disabled buttons. Inherit color from theme package.|
|`--teft-buttons-border-radius`|`6.25em`|Button burder radius.|

## Examples

### Using default WordPress Buttons Block markup.
```html
<div class="wp-block-buttons">
	<div class="wp-block-button"><a class="wp-block-button__link" href="#">Primary Button</a></div>
	<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" href="#">Outlined Button</a></div>
</div>
```

### Buttons block in different styles and colors.

<img width="502" alt="Teft+wp-block-buttons" src="https://user-images.githubusercontent.com/16900754/89272038-dd28a900-d63d-11ea-862f-59b0debc76f3.png">

### Markup using `.teft-button` class.

```html
<a href="#" class="teft-button">Primary Teft Button</a>
<input type="button" class="teft-button teft-button--secondary" value="Teft Button Secondary" />
<input type="button" class="teft-button teft-button--alert" value="Teft Button Alert" />
<button type="submit" class="teft-button teft-button--success">Teft Button Success</button>
<button type="button" class="teft-button teft-button--warning">Teft Button Warning</button>
<button type="button" class="teft-button teft-button--warning" disabled>Teft Button Warning :disabled</button>
```

### Teft buttons in different states.

<img width="569" alt="Teft Buttons" src="https://user-images.githubusercontent.com/16900754/89275913-39da9280-d643-11ea-8b54-dd40b85b49ee.png">

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