bpk-component-button

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 link>Link</BpkButton>
    <BpkButton outline>Outline</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
outline	bool	false	false
secondary	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
padded	bool	false	false
rel	string	false	null
submit	bool	false	false

Note: The padded boolean only applies to link-style buttons

Theme Props

Primary:

• buttonPrimaryTextColor
• buttonPrimaryHoverTextColor
• buttonPrimaryActiveTextColor
• buttonPrimaryGradientStartColor
• buttonPrimaryGradientEndColor
• buttonPrimaryBackgroundColor
• buttonPrimaryHoverBackgroundColor
• buttonPrimaryActiveBackgroundColor

Secondary:

• buttonSecondaryTextColor
• buttonSecondaryHoverTextColor
• buttonSecondaryActiveTextColor
• buttonSecondaryBorderColor
• buttonSecondaryHoverBorderColor
• buttonSecondaryActiveBorderColor
• buttonSecondaryBackgroundColor
• buttonSecondaryHoverBackgroundColor
• buttonSecondaryActiveBackgroundColor

Featured:

• buttonFeaturedTextColor
• buttonFeaturedHoverTextColor
• buttonFeaturedActiveTextColor
• buttonFeaturedGradientStartColor
• buttonFeaturedGradientEndColor
• buttonFeaturedBackgroundColor
• buttonFeaturedHoverBackgroundColor
• buttonFeaturedActiveBackgroundColor

Destructive:

• buttonDestructiveTextColor
• buttonDestructiveHoverTextColor
• buttonDestructiveActiveTextColor
• buttonDestructiveBorderColor
• buttonDestructiveHoverBorderColor
• buttonDestructiveActiveBorderColor
• buttonDestructiveBackgroundColor
• buttonDestructiveHoverBackgroundColor
• buttonDestructiveActiveBackgroundColor

All button types:

• buttonFontSize (Optional)