bpk-component-loading-button

Backpack loading button component.

Installation

npm install bpk-component-loading-button --save-dev

Usage

import React from 'react';
import BpkLoadingButton from 'bpk-component-loading-button';
import BaggageIcon from 'bpk-component-icon/sm/baggage';
import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';

const AlignedBaggageIcon = withButtonAlignment(withRtlSupport(BaggageIcon));
const icon = <AlignedBaggageIcon />;

export default () => (
  <div>
    <BpkLoadingButton>Primary</BpkLoadingButton>
    <BpkLoadingButton large>Large primary</BpkLoadingButton>
    <BpkLoadingButton secondary>Secondary</BpkLoadingButton>
    <BpkLoadingButton iconOnly>
      <span className="visually-hidden">Search</span>
    </BpkLoadingButton>
    <BpkLoadingButton icon={icon} iconDisabled={icon}>Custom Icon</BpkLoadingButton>
  </div>
);

Props

| Property | PropType | Required | Default Value | | ------------ | -------------------- | -------- | ---------------------- | | children | node | true | - | | className | string | false | null | | disabled | bool | false | false | | secondary | bool | false | false | | destructive | bool | false | false | | loading | bool | false | false | | iconOnly | bool | false | false | | icon | element | false | null | | iconDisabled | element | false | null | | iconPosition | oneOf(ICON_POSITION) | false | ICON_POSITION.TRAILING |