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)