Link

A link allows the user to navigate to another place.

Anatomy

1. Text - link text should succinctly describe its destination.
2. Destination - where the link will navigate when clicked. This is typically the address (URL) of another page, or a fragment identifier on the current page.

Usage

Links (formally "hyperlinks") are foundational to the web, allowing documents to be connected. These connections can be thought of as the webbing between sites, which is why we call it "the web." Because links form the basis for how we navigate the web, great care should be taken not to override their core behavior.

• Clicking a link navigates the user to another place on the same page or to a different page.
• A link should always affect the browser history. In other words, after a user clicks a link to navigate to a new location, they should be able to return by pressing the browser's back button. A link allows the user to return to the previous location by pressing the browser's back button.
• Activating the link changes the URL in the same tab or opens a new tab with the link URL.
• Links should open in the same tab when users are navigating within the same page, product or user flow.
• Links can open in a new tab when it is taking the user to another website and/or it is in the user's interest not to lose their place in the current flow. Users don't usually expect links to open in a new tab and they can manually choose to open a link in a new tab or window, so when in doubt default to opening in the same tab.
• All links that open in a new tab display the launch icon after the link text.
• A link's href value must be a valid URL or URL fragment.
• Enter (keydown) activates the link. Links always move focus when activated.
• Links in body copy should always be underlined and displayed in a different color.
• Links add cognitive load, as every link presents the user with a decision to activate it or not. For this reason, links should be used sparingly and include as few words as possible while accurately and clearly describing the destination.
• A destination should only be linked once in a given page or section.
• When linking to the same destination on different pages, the link text should be the same.

Do

• Do use a link when…
  • It would be useful to "Copy", "Open in a new tab", or "Bookmark" the destination URL.
  • The text content is embedded in a sentence, and does not need margins or padding.
  • The text content conveys location, not an action (for example: a link that references a resource).
  • You want to record the navigation in the user's browser history.
• Do style links so that they are visually different from plain text, and indicate that they can be clicked.

Don't

• Don't create links that look like buttons. If dictation software users say "show buttons", the actions will not be listed. Keyboard users may try to press Space to activate, which will do nothing.
• Don't use an ambiguous label like “click here”. The link's text content should clearly describe its destination or purpose.
• Don't include the punctuation if a link is at the end of a sentence or before a comma.
• Don't use Javascript to simulate links. Use a valid href instead.

Consider using buttons if...

• The component is styled like a button. (See Don't create links that look like buttons, above).
• The label communicates an action that the user can take.
• If the action taken will change or manipulate data on the page.

Interactions

• Links are focusable so that they can be activated by all users.
• Links are activated with Enter or pointer click.

React API

We expose one component for the link API, the Link.

Link

The <Link> component extends the React.ComponentPropsWithoutRef<'a'> interface.

If defined, our <Link> will use the link component provided by the nearest AppProvider context. This allows you to use our Link wrapper for your application's router link component, such as the React Router <Link>.

If the nearest link component context is undefined, the rendered link will be a normal anchor element with the added external prop that can be used to make the link open in an external window/tab.

import { Link } from '@wwnds/react';

Live Editor

<AppProvider linkComponent={null}>
	<Link external={true} href="https://github.com/wwnorton/design-system">
		Norton Design System
	</Link>
</AppProvider>

Result

Loading...

Name	Description	Type
external	Indicates that the link should open in a new window or tab.	any