Anchor

Anchors should be used when an element with a link is intended to appear visually like a traditional browser link, text with a simple underline.

When deciding whether to use Anchor or Button, consider the visual appearance of the element. If the element will look like a traditional browser link, use Anchor. If there will be background or border styling, use Button.

Semantically, if you apply an href to either an Anchor or a Button, both will appear as an anchor tag in the DOM. This is why it is important to consider the visual appearance of the element when deciding whether to use Anchor or Button.

Here are some contexts in which Anchor should be used:

• as inline text links
• to add links to resources within contexts such as a form

If a clickable element is intended to appear with a background color, border, of hover style, implement this using Button. Use buttons when you are performing an action, such as: "submit," "merge," "create new," "upload," or if you are using a combination of icon and label.

It is important that your anchor clearly states to what content the anchor leads. For example, labels such as "Account Information" or "How to change account credentials" are both effective labels that allow the user to have confidence in where the anchor will lead them.

Use 'target' and 'rel' props when linking externally:

If clicking an Anchor leads to an external URL, apply these props to the anchor:

• target="_blank"
• rel="noopener"

The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page?

The "_blank" target causes the link to open in a new tab, so the user doesn't lose their place on the application. Adding the "noopener" property prevents the newly opened page from gaining access to the original page which helps maintain the security of your application.

Use clear Anchor labels:

It is important to make sure the label of the anchor will allow screen reader users to know where the anchor will lead.

Unhelpful Anchor label:

• Read more here

The word "here" is vague. A screen reader user may not know the context of "here".

Helpful Anchor label:

• Read more Anchor documentation

This clearly states the type of content to which the Anchor relates.

Anchors are used primarily in text heavy contexts. Here are some ways to use them.

Anchors are most commonly used as inline elements to bring users to other pages within an application or to external links.

Using the 'target' and 'rel' props allow you to create smooth user experiences while maintaining security of your application.

Using an Anchor within a Form can link users to additional information that may be secondary to form content.

Used to indicate that an anchor cannot be interacted with.

A weight can be applied to Anchor in cases where extra emphasis is needed. This example demonstrates an Anchor with weight="bold".