HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
Usage of Anchor vs. Button
Anchor Labeling
Accessibility
Variants
Inline anchor
Anchor to external site
Anchor in a form
Disabled anchor
Anchor with weight
Components

Anchor

Hyperlinks used with text-based navigation, such as inline text.

Default anchor: Anchor

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.

Usage of Anchor vs. Button

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.

Do

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.

Don't

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.

Sign Up

for a Hewlett Packard Enterprise account
  • One uppercase letter
  • One lowercase letter
  • One special character
  • At least 8 characters

Disabled anchor

Used to indicate that an anchor cannot be interacted with.

Our Philosophy

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".

Bold anchor: Anchor

Related

Related content you may find useful when using Anchor.

Button

Buttons are graphic elements that indicate to users that actions can be performed.
HPE Typography Preview

Typography

The MetricHPE font is an integral part of our personality and design. When we’re making a statement, our visual language is clear, recognized and understood.
HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page