Primary

The Backpack primary button is available in two sizes and comes with styles for hover, active and disabled states.

Primary on Dark

This button can be used on dark coloured backgrounds.

Primary on Light

This button can be used on light coloured backgrounds.

Secondary

Similar to the primary button, the secondary version is available in two sizes and comes with styles for hover, active and disabled states.

Secondary on Dark

This button can be used on dark coloured backgrounds.

Featured

This button is reserved for featured actions.

Destructive

This button can be used to highlight destructive actions.

Link

As links, Link buttons are used as a tertiary means of triggering actions. The styling of Link buttons is different from links due to the vertical padding applied to Link buttons. Like all other buttons, these are available in two sizes and have hover, active and disabled states.

Link on Dark

This button can be used on light coloured backgrounds.

Loading Buttons

Full Width

                                                
                                                import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
                                                import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-right';
                                                import { BpkButtonV2, BUTTON_TYPES, SIZE_TYPES } from '@skyscanner/backpack-web/bpk-component-button';
                                                
                                                const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));
                                                
                                                export default () => (
                                                  <div>
                                                    <BpkButtonV2>Primary</BpkButtonV2>
                                                    <BpkButtonV2 size={SIZE_TYPES.large}>Large primary</BpkButtonV2>
                                                    <BpkButtonV2 type={BUTTON_TYPES.secondary}>Secondary</BpkButtonV2>
                                                    <BpkButtonV2 type={BUTTON_TYPES.secondaryOnDark}>SecondaryOnDark</BpkButtonV2>
                                                    <BpkButtonV2 type={BUTTON_TYPES.link}>Link</BpkButtonV2>
                                                    <BpkButtonV2 type={BUTTON_TYPES.linkOnDark}>LinkOnDark</BpkButtonV2>
                                                    <BpkButtonV2 type={BUTTON_TYPES.primaryOnDark}>PrimaryOnDark</BpkButtonV2>
                                                    <BpkButtonV2 type={BUTTON_TYPES.primaryOnLight}>PrimaryOnLight</BpkButtonV2>
                                                    <BpkButtonV2 iconOnly>
                                                      <AlignedArrowIcon />
                                                      <span className="visually-hidden">Search</span>
                                                    </BpkButtonV2>
                                                    <BpkButtonV2 fullWidth>Full Width</BpkButtonV2>
                                                  </div>
                                                );

Button props

                                                
                                                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>
                                                );

Loading button props

                                                
                                                import BpkCloseButton from '@skyscanner/backpack-web/bpk-component-close-button';
                                                
                                                export default () => (
                                                  <BpkCloseButton label="Close" onClick={() => console.log('click')} />
                                                );

Close button props