bpk-component-button-css

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)