Components
Actions
Link

Link

Links are typically used as a means of navigation either within the application, to a place outside, or to a resource.

Import statement

import { Link } from "@wfp/react"

Standalone link

Standalone links are used on their own directly following content. They should not be used within sentences or paragraphs. Standalone links are the default link style for WFP and only have an underline in the hover state.

The standalone link component can be paired with an icon. Use FontAwesome icons and place them to the right of the link. Icons should always be the same colour as the link text.

Editable Example

<Link href="https://www.wfp.org">Link text</Link>;

Inline link

Inline links are used in sentences or paragraphs of text. The inline link behaves the same as the standalone link but it is styled with an underline. This helps differentiate them from the text they are placed next to and makes it clear users can interact with them.

Inline links should not be used on their own and should not be paired with icons.

Editable Example

<>
  Lorem ipsum dolor sit amet, consetetur sadipscing
  elitr, sed{" "}
  <Link href="https://www.wfp.org" inline>
    diam nonumy
  </Link>{" "}
  eirmod tempor invidunt ut labore et dolore magna
  aliquyam erat.
</>;

Link with icon

Links can be paired with icons to help users understand where they will be directed. Icons should always be the same colour as the link text.

Editable Example

<Link href="https://www.wfp.org" icon={<Info />}>
  Link text
</Link>;
Expand code

Editable Example

### Links that trigger actions

Some links trigger actions to aid task completion in addition to navigation. These links should still serve a navigation purpose. A common example is linking phone numbers so clicking the website automatically opens and calls the phone number when clicked. The label and any accompanying icons should make it clear what action will be triggered and where the user will be directed.

### Use with external routing libraries

#### next/link

By passing `passHref` and `legacyBehavior` to the [next/link](https://nextjs.org/docs/api-reference/next/link) component, you can use the `Link` component from `@wfp/react` as a child of the `next/link` component.

```jsx
import NextLink from "next/link";
import { Link } from "@wfp/react";

function MyComponent() {
  return (
    <NextLink href="/about" passHref legacyBehavior>
      <Link>About</Link>
    </NextLink>
  );
}

HTML only use

This can be useful for usages outside of react or with libraries like react-router.

For example you can use the Link styling by adding the className wfp--link to <NavLink />.

<a className="wfp--link">Link</a>

On this page

References