bpk-component-button-css v6.2.3

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

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)