bpk-component-button

7.1.2 • Public • Published

bpk-component-button

Backpack button component.

Installation

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

Usage

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)

Readme

Keywords

none

Package Sidebar

Install

npm i bpk-component-button

Weekly Downloads

13

Version

7.1.2

License

Apache-2.0

Unpacked Size

128 kB

Total Files

71

Last publish

Collaborators

  • anambl
  • skyscanner-koalasquad
  • gert-jan.vercauteren
  • frugoman
  • marianeumayer-skyscanner
  • ojcurt
  • mattface