Backpack link component.
Check the main Readme for a complete installation guide.
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>
)
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
Check out the full list of props on Skyscanner's design system documentation website.