Guidance
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.
Anchor Labeling
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.
If you haven't yet, you can read about Our Philosophy.
Use label text that is descriptive about where the anchor will lead the user.
If you haven't yet, click here to read about Our Philosophy.
Use vague text like "Click here" because it doesn't provide meaning to users that rely on screen readers.
Accessibility
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.
Variants
Anchors are used primarily in text heavy contexts. Here are some ways to use them.
Inline anchor
Anchors are most commonly used as inline elements to bring users to other pages within an application or to external links.
Embracing the courage and commitment to learn, share and serve with uncompromising integrity, the HPE Design System will advance the way people live and work. If you haven't yet, you can read about Our Philosophy.
Anchor to external site
Using the 'target' and 'rel' props allow you to create smooth user experiences while maintaining security of your application.
The HPE Design System is built with Grommet components. If you want to learn more, head over to the Grommet website.
Anchor in a form
Using an Anchor within a Form can link users to additional information that may be secondary to form content.
Disabled anchor
Used to indicate that an anchor cannot be interacted with.
Anchor with weight
A weight can be applied to Anchor in cases where extra emphasis is needed. This example demonstrates an Anchor with weight="bold"
.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.