Link

This component enables links to other resources, pages or views.

Default

Storybook failed to load.

Alternate

Storybook failed to load.

bpk-component-link

Backpack link component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkLink, { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';
                                                
                                                export default () => (
                                                  <div>
                                                    Links can be both <BpkLink href="http://www.skyscanner.net/">anchor tags</BpkLink> as well
                                                    as <BpkButtonLink onClick={() => console.log('link button click!')}>button tags</BpkButtonLink>.
                                                  </div>
                                                )

Single Page App (SPA) Frameworks

If you're using a SPA framework like react-router-dom or Next.js to navigate between pages without refreshing, then you can wrap BpkLink in the component provided by the framework.

react-router-dom Link using the component prop

Next.js Link using a custom component as the child element

Props

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

Props

Storybook failed to load.