bpk-component-link

bpk-component-link

Backpack link component.

Installation

Check the main Readme for a complete installation guide.

Usage

Default anchor link

import BpkLink from '@skyscanner/backpack-web/bpk-component-link';

<BpkLink href="http://www.skyscanner.net/">Visit Skyscanner</BpkLink>

Polymorphic as prop

BpkLink supports a polymorphic as prop that allows rendering as different HTML elements while maintaining consistent link styling.

import BpkLink from '@skyscanner/backpack-web/bpk-component-link';

// Rendering as a button (for actions without navigation)
<BpkLink as="button" onClick={() => {}}>
  Trigger action
</BpkLink>

// Rendering as a span (non-interactive, for SEO or disabled states)
<BpkLink as="span">Link styling without interaction</BpkLink>

// Rendering as a div (block-level non-interactive element)
<BpkLink as="div">Block-level link-styled text</BpkLink>

When to use each element

Element	Use case
"a" (default)	Navigation to other pages or external URLs
"button"	Actions that don't navigate (e.g., opening modals, triggering functions)
"span"	Non-interactive inline text with link styling (e.g., SEO, disabled states)
"div"	Non-interactive block-level content with link styling

Note: When as is set to "button", "span", or "div", the component accepts props appropriate to that element type instead of anchor-specific props like href, blank, and rel.

Type inference

The component correctly infers prop types based on the chosen element:

// ✅ Correct: href is required for anchor
<BpkLink href="/">Navigate</BpkLink>

// ✅ Correct: onClick for button, no href needed
<BpkLink as="button" onClick={handleClick}>Action</BpkLink>

// ❌ TypeScript error: href is not valid for button
<BpkLink as="button" href="/">Action</BpkLink>

Styling variants

// Alternate style (for dark backgrounds)
<BpkLink href="/" alternate>Light link on dark background</BpkLink>

// Implicit style (no underline until hover)
<BpkLink href="/" implicit>Subtle link</BpkLink>

// Combined
<BpkLink href="/" alternate implicit>Subtle light link</BpkLink>

Accessibility

BpkLink is designed with accessibility in mind:

• Semantic HTML: Uses appropriate elements (<a> for navigation, <button> for actions)
• Keyboard navigation: All interactive variants are focusable and operable via keyboard
• External links: When using blank prop, automatically adds rel="noopener noreferrer" for security
• Color contrast: Link colors meet WCAG 2.1 AA contrast requirements

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, wrap BpkLink in the component provided by the framework.

// React Router v6
import { Link } from 'react-router-dom';
import BpkLink from '@skyscanner/backpack-web/bpk-component-link';

<Link to="/flights" component={BpkLink}>
  View flights
</Link>

// Next.js
import Link from 'next/link';
import BpkLink from '@skyscanner/backpack-web/bpk-component-link';

<Link href="/flights" passHref legacyBehavior>
  <BpkLink>View flights</BpkLink>
</Link>

Deprecated: BpkButtonLink

BpkButtonLink has been deprecated. Please use <BpkLink as="button" /> instead:

// Before (deprecated)
import { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';
<BpkButtonLink onClick={handleClick}>Click me</BpkButtonLink>

// After (recommended)
import BpkLink from '@skyscanner/backpack-web/bpk-component-link';
<BpkLink as="button" onClick={handleClick}>Click me</BpkLink>

Props

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