# bpk-component-button-css

> Backpack button component.

Latest version **6.2.3** (published 2022-05-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install bpk-component-button-css
pnpm add bpk-component-button-css
yarn add bpk-component-button-css
bun add bpk-component-button-css
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 6.2.3 |
| Published | 2022-05-20 |
| First published | 2020-07-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 113.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 543 |
| Author | Backpack Design System |
| Maintainers | k0nserv, shaundon, georgegillams, tiagohngl, ojcurt |

## Links

- npm: https://www.npmjs.com/package/bpk-component-button-css
- Repository: https://github.com/Skyscanner/backpack
- Homepage: https://github.com/Skyscanner/backpack#readme
- Issues: https://github.com/Skyscanner/backpack/issues
- npm.io page: https://npm.io/package/bpk-component-button-css

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [bpk-mixins-css](https://npm.io/package/bpk-mixins-css.md) ^31.0.0

## Recent versions

- 6.2.3 (latest) — 2022-05-20
- 6.2.1 — 2022-04-27
- 6.1.0 — 2022-04-14
- 6.0.1 — 2022-04-04
- 5.1.1 — 2022-03-22
- 5.1.0 — 2022-03-02
- 5.0.29 — 2022-02-17
- 5.0.26 — 2022-02-08
- 5.0.25 — 2022-02-07
- 5.0.24 — 2022-02-02
- 5.0.18 — 2021-12-09
- 5.0.16 — 2021-12-01
- 5.0.15 — 2021-11-29
- 5.0.14 — 2021-11-15
- 5.0.10 — 2021-09-13
- … 65 more at https://npm.io/package/bpk-component-button-css/versions

## README

# bpk-component-button

> Backpack button component.

## Installation

```sh
npm install bpk-component-button --save-dev
```

## Usage

```js
import React from 'react';
import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
import ArrowIcon from 'bpk-component-icon/sm/long-arrow-right';
import BpkButton from 'bpk-component-button';

const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));

export default () => (
  <div>
    <BpkButton>Primary</BpkButton>
    <BpkButton large>Large primary</BpkButton>
    <BpkButton secondary>Secondary</BpkButton>
    <BpkButton secondaryOnDark>SecondaryOnDark</BpkButton>
    <BpkButton link>Link</BpkButton>
    <BpkButton linkOnDark>LinkOnDark</BpkButton>
    <BpkButton outline>Outline (Deprecated, use PrimaryOnDark or PrimaryOnLight instead)</BpkButton>
    <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
    <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
    <BpkButton iconOnly>
      <AlignedArrowIcon />
      <span className="visually-hidden">Search</span>
    </BpkButton>
  </div>
);
```

## Props

| Property        | PropType             | Required | Default Value |
| --------------- | -------------------- | -------- | ------------- |
| children        | -                    | true     | -             |
| destructive     | bool                 | false    | false         |
| featured        | bool                 | false    | false         |
| link            | bool                 | false    | false         |
| linkOnDark      | bool                 | false    | false         |
| outline         | bool (deprecated)    | false    | false         |
| secondary       | bool                 | false    | false         |
| secondaryOnDark | bool                 | false    | false         |
| primaryOnDark   | bool                 | false    | false         |
| primaryOnLight  | bool                 | false    | false         |
| blank           | bool                 | false    | false         |
| className       | string               | false    | null          |
| disabled        | bool                 | false    | false         |
| href            | string               | false    | null          |
| iconOnly        | bool                 | false    | false         |
| large           | bool                 | false    | false         |
| onClick         | func                 | false    | null          |
| rel             | string               | false    | null          |
| submit          | bool                 | false    | false         |

## Theme Props

### Primary:

* `buttonPrimaryTextColor`
* `buttonPrimaryHoverTextColor`
* `buttonPrimaryActiveTextColor`
* `buttonPrimaryGradientStartColor`
* `buttonPrimaryGradientEndColor`
* `buttonPrimaryBackgroundColor`
* `buttonPrimaryHoverBackgroundColor`
* `buttonPrimaryActiveBackgroundColor`

### Primary on dark:

* `buttonPrimaryOnDarkTextColor`
* `buttonPrimaryOnDarkHoverTextColor`
* `buttonPrimaryOnDarkActiveTextColor`
* `buttonPrimaryOnDarkBackgroundColor`
* `buttonPrimaryOnDarkHoverBackgroundColor`
* `buttonPrimaryOnDarkActiveBackgroundColor`

### Primary on light:

* `buttonPrimaryOnLightTextColor`
* `buttonPrimaryOnLightHoverTextColor`
* `buttonPrimaryOnLightActiveTextColor`
* `buttonPrimaryOnLightBackgroundColor`
* `buttonPrimaryOnLightHoverBackgroundColor`
* `buttonPrimaryOnLightActiveBackgroundColor`

### Secondary:

* `buttonSecondaryTextColor`
* `buttonSecondaryHoverTextColor`
* `buttonSecondaryActiveTextColor`
* `buttonSecondaryBorderColor`
* `buttonSecondaryHoverBorderColor`
* `buttonSecondaryActiveBorderColor`
* `buttonSecondaryBackgroundColor`
* `buttonSecondaryHoverBackgroundColor`
* `buttonSecondaryActiveBackgroundColor`

### Secondary on dark:

* `buttonSecondaryOnDarkTextColor`
* `buttonSecondaryOnDarkHoverTextColor`
* `buttonSecondaryOnDarkActiveTextColor`
* `buttonSecondaryOnDarkBackgroundColor`
* `buttonSecondaryOnDarkHoverBackgroundColor`
* `buttonSecondaryOnDarkActiveBackgroundColor`

### Featured:

* `buttonFeaturedTextColor`
* `buttonFeaturedHoverTextColor`
* `buttonFeaturedActiveTextColor`
* `buttonFeaturedGradientStartColor`
* `buttonFeaturedGradientEndColor`
* `buttonFeaturedBackgroundColor`
* `buttonFeaturedHoverBackgroundColor`
* `buttonFeaturedActiveBackgroundColor`

### Destructive:

* `buttonDestructiveTextColor`
* `buttonDestructiveHoverTextColor`
* `buttonDestructiveActiveTextColor`
* `buttonDestructiveBorderColor`
* `buttonDestructiveHoverBorderColor`
* `buttonDestructiveActiveBorderColor`
* `buttonDestructiveBackgroundColor`
* `buttonDestructiveHoverBackgroundColor`
* `buttonDestructiveActiveBackgroundColor`

### All button types:
* `buttonFontSize` (Optional)

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