# @nib-styles/v2-buttons

> nib styled buttons.

Latest version **4.0.0** (published 2017-03-08) · 0 weekly downloads

## Install

```sh
npm install @nib-styles/v2-buttons
pnpm add @nib-styles/v2-buttons
yarn add @nib-styles/v2-buttons
bun add @nib-styles/v2-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 | 4.0.0 |
| Published | 2017-03-08 |
| First published | 2015-11-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | andrewoh, appclay, becamay, cmayson, cstonestreet, e-r-w, eastwood, glyn, iknowcss, infl3x, jameslnewell, kthomas, lauriejones, lurch83, mattbourke, matthew-turner, nford_nib, nib-build-agent, nib-mmurphy, nib-styles-admin, qimyi, ranjukj, samjeffress, sheakelly, sonnymai, tomasmckinless, wfalconer |

## Links

- npm: https://www.npmjs.com/package/@nib-styles/v2-buttons
- Repository: https://github.com/nib-styles/v2-buttons
- Homepage: https://github.com/nib-styles/v2-buttons#readme
- Issues: https://github.com/nib-styles/v2-buttons/issues
- npm.io page: https://npm.io/package/@nib-styles/v2-buttons

## Dependencies (3)

- [@nib-styles/colors](https://npm.io/package/@nib-styles/colors.md) ^1.1.1
- [@nib-styles/v2-icons](https://npm.io/package/@nib-styles/v2-icons.md) ^3.0.0
- [@nib-styles/v2-typography](https://npm.io/package/@nib-styles/v2-typography.md) ^5.0.0

## Recent versions

- 4.0.0 (latest) — 2017-03-08
- 3.0.0-rc4 (next) — 2016-03-31
- 3.1.0 — 2016-08-01
- 3.0.1 — 2016-05-04
- 3.0.0 — 2016-05-04
- 3.0.0-rc3 — 2016-03-24
- 3.0.0-rc2 — 2016-03-10
- 3.0.0-rc1 — 2016-03-10
- 2.1.1 — 2015-11-19

## README

# @nib-styles/v2-buttons

nib styled buttons.

## Installation

    npm install --save @nib-styles/v2-buttons

**Note:** Requires `Opens Sans` and `Roboto` fonts from Google Fonts:

```html
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:700|Roboto:700' />
```

## Usage

### Using mixins

```scss
@import "@nib-styles/v2-buttons";

.feature {
  &__call-to-action{
    @include button('primary', $icon: 'person', $size: 'large')
  }
}
```

```html
<button class="feature__call-to-action">
    Add a dependant
</button>
```

### Using compiled classes

```scss
@import "@nib-styles/v2-buttons/compiled";
```

```html
<button class="v2-button v2-button--primary v2-button--large v2-button--icon-on-right">
    Add a dependant <i class="v2-icon v2-icon--person v2-icon--smallest v2-icon--offset-descenders"></i>
</button>
```

See the pattern library or [example/example.html](example/example.html) a complete list of classes.

## Mixins

```scss
@include button($type, $color, $icon: false, $size: null);
```

- `$type` Required. May be `primary`, `secondary` or `tertiary`.

- `$color` Required. Dependent on `$type`.
  - Primary: `null`. (Default yellow)
  - Secondary: `green`, `dark-grey`, or `light-grey`.
  - Tertiary: `green`, `grey` or `white`.

- `$icon` Optional. If `false` no icon is displayed. If `true` the `chevron-circle-inverse` icon is displayed. May be the name of a `v2-icon` e.g. `person`, `gear`, `dollar-circle`.

- `$size` Optional. May be `medium` or `large`.

## Changelog

### 4.0.0

- break: bump version of `v2-icons`

### 3.0.0

- addition: Mixins!
- removed: supplementary buttons
- removed: large button style

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