@nutkit/button v0.0.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 link>Link</BpkButton>
    <BpkButton iconOnly>
      <AlignedArrowIcon />
      <span className="visually-hidden">Search</span>
    </BpkButton>
  </div>
);

Props

Theme Props

Primary:

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

Secondary:

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