bpk-component-loading-button

bpk-component-loading-button

Backpack loading button component.

Installation

Check the main Readme for a complete installation guide.

Usage

import BpkLoadingButton from '@skyscanner/backpack-web/bpk-component-loading-button';
import BaggageIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/baggage';
import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/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

Check out the full list of props on Skyscanner's design system documentation website.