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

                                                
                                                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>
                                                    <BpkButton>Primary</BpkButton>
                                                    <BpkButton size={SIZE_TYPES.large}>Large primary</BpkButton>
                                                    <BpkButton type={BUTTON_TYPES.secondary}>Secondary</BpkButton>
                                                    <BpkButton type={BUTTON_TYPES.secondaryOnDark}>SecondaryOnDark</BpkButton>
                                                    <BpkButton type={BUTTON_TYPES.link}>Link</BpkButton>
                                                    <BpkButton type={BUTTON_TYPES.linkOnDark}>LinkOnDark</BpkButton>
                                                    <BpkButton type={BUTTON_TYPES.primaryOnDark}>PrimaryOnDark</BpkButton>
                                                    <BpkButton type={BUTTON_TYPES.primaryOnLight}>PrimaryOnLight</BpkButton>
                                                    <BpkButton iconOnly>
                                                      <AlignedArrowIcon />
                                                      <span className="visually-hidden">Search</span>
                                                    </BpkButton>
                                                  </div>
                                                );

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