Skip to content

Link

Link generates accessible anchor tags to navigate between internal and external URLs.
Figma logo

An accessible, Gusto-themed link.

Links can be styled as primary or secondary buttons.

The before and after props can be used to append and prepend icons to a link.

Links can in certain circumstances be opened in a new tab (e.g. the user is in the middle of a complicated workflow). Consider the implications of this technique along with any additional rel values that should be set.

Cross-origin links are programmatically appended with rel="noopener noreferrer" for security purposes. You will still need to set the target to open the link in a new tab and use the after prop to add the ExternalLink icon.

Allows mobile devices to dial the number with a tap.

This will open an email to the specified address in the default email client.

Destructive links can be created using the color prop.

Read more about accessible link text and how aria-label can be used effectively.

React props
NameTypeDefaultDescription
after  ReactNodeContent shown after children.
before  ReactNodeContent shown before the children.
children  ReactNodeThe content of the Link.
color  errorprimaryprimaryBackground and foreground colors.
edge  endstartAligns the visual edge of a button along a specified side. For example, edge="start" aligns the text of a tertiary button to align with content above and below on the left side.
href  RequiredstringThe destination of the Link.
target  _blank_self_parent_topThe opening target for the Link. If target="_blank", the link will be opened in a new tab.
size  smallmediumlargeThe size of the button when variant is set to "primary" or "secondary".
variant  linkprimarysecondarytertiarylinkDetermines the shape of the element (button or text link).

Link was built with accessibility in mind.

  • Links are now underlined by default, which is a departure from our previous standard. The underline helps users identify links in a way that we cannot otherwise easily achieve given our limited color palette.
  • Help users understand the context of a link by focusing on the action and content, e.g. Read more about our UX Writing guidance. Avoid generic verbiage like “click here”.
  • Be cognizant that opening links in a new tab can be confusing to non-sighted users.

A few useful references courtesy of MDN.

A few useful values for the "rel" attribute
ValueDescription
next

Indicates that the hyperlink leads to the next resource of the sequence the current page is in.

Note: Other link types related to linking resources in the same sequence are first, prev, last.

nofollowIndicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two. This link type may be used by some search engines that use popularity ranking techniques.
noopener

Instructs the browser to open the link without granting the new browsing context access to the document that opened it—by not setting the window.opener property on the opened window (it returns null).

This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property while still providing the Referer HTTP header (unless noreferrer is used as well).

Note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.

noreferrerPrevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referer: HTTP header.
prev

Indicates that the hyperlink leads to the preceding resource of the sequence the current page is in.

Note: Other link types related to linking resources in the same sequence are first, last, next.

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

const onClick = jest.fn();
render(
<Link href="https://gusto.com" onClick={onClick}>
Gusto
</Link>,
);
const link = screen.getByRole('link', {
name: 'Gusto',
});
userEvent.click(link);
expect(onClick).toHaveBeenCalled();