Link

Link is used to navigate the user to any location that includes a change to the URL.

UsagePermalink to: Usage

Use Links to navigate the user to another location, such as another page or another section of the current page.

AccessibilityPermalink to: Accessibility

The description of each Link should be distinguishable from other Links on the same page, apart from when the Links lead to the same destination, in which case they should have the same (or similar) description. Links that navigate to an external site or new tab should indicate as such. For more detailed information on describing a link's purpose, see the WCAG for link purpose(external link).

Ideally, it should be clear where a Link will take a user from the Link text itself, however it is also permissible to provide meaning from context (eg. preceding text in a sentence). For more detailed information on contextual descriptions, see the WCAG for link purpose in context(external link).

ExamplesPermalink to: Examples

ColorsPermalink to: Colors

There are two variants of a Link color: primary and secondary. If you provide no variant, the Link will inherit the current color.

Use no variant to integrate more seamlessly with surrounding text. You can use primary or secondary when emphasis is required.

import { Link } from "@peakon/bedrock/react/link";
import { Stack } from "@peakon/bedrock/react/layout";

<Stack spacing={8}>
  <Link href="#">No variant</Link>
  <Link href="#" variant="primary">
    Primary
  </Link>
  <Link href="#" variant="secondary">
    Secondary
  </Link>
</Stack>;

With indicatorPermalink to: With indicator

Adding the withIndicator prop will render an chevron character at the end of the Link. This can used to further indicate that the Link will navigate you away from the current page, if other contextual clues are lacking.

import { Link } from "@peakon/bedrock/react/link";

<Link withIndicator href="#">
  Link with indicator
</Link>;

BoldPermalink to: Bold

It is possible to make the Link bold, however this should only be used when the Link is "isolated", ie. not when the Link is part of a paragraph of text.

import { Link } from "@peakon/bedrock/react/link";

<Stack spacing={8}>
  <Link href="#" bold>
    This link is bold
  </Link>
  <Link href="#" withIndicator bold>
    This link is bold and has an indicator
  </Link>
</Stack>;

As custom linkPermalink to: As custom link

Link supports custom or framework-specific link components (eg. Next.js or React Router) via the as prop.

import { default as NextLink } from "next/link";
import { Link } from "@peakon/bedrock/react/link";

<Link as={NextLink} href="#">
  Link as Next.js
</Link>;

Link as buttonPermalink to: Link as button

It is possible to create a button that looks like a Link. This is a special case that is strongly advised against. The purpose of this is more for legacy support than new features.

import { ButtonLink } from "@peakon/bedrock/react/link";

<ButtonLink onClick={() => window.alert("Clicked!")}>
  I am actually a button
</ButtonLink>;

Props TablePermalink to: Props Table

LinkPermalink to: Link

Props extend from HTML Anchor Element(external link), with the omission of className and style

ButtonLinkPermalink to: ButtonLink

Props extend from HTML button element(external link), with the omission of className and style

ReferencesPermalink to: References

• WCAG: Link Purpose(external link)
• WCAG: Link Purpose (in context)(external link)