Anchor

Anchors are hyperlinks that take users to another page or a section on a page. They are found throughout the interface, both on their own line and inline with text.

Code

Usage

import { Anchor } from "@twilio-labs/match/components";
const Component = () => <Anchor href="/">Ahoy</Anchor>;

Props

PropTypeDefaultDescription
variant?AnchorVariant'primary''primary', 'inverse', 'text'
href?stringnullA URL to route to.
target?AnchorTargetnull'_self', '_blank', '_parent', '_top'
rel?stringnullDefaults to '_blank' for external links
noUnderline?booleanfalseRemoves the underline from the anchor.

Guidelines

Anchors vs Buttons

All actions outside of linking to another URL should use a button. For example, actions such as submitting a form or closing a module should use a Button.

If an Anchor does not link to a valid URL, omit the href attribute to render as a button. Never set href to "#" or "javascript:void(0)".

The Button component can also be used as a CTA anchor when the href prop is included. In this situation the element looks like a button but renders as an anchor.

Learn more about the Button component to determine if it will fit your needs better.

Accessibility

Here are some quick accessibility tips to ensure a positive user experience for all users:

  • Avoid using only color to communicate information. Use another indicator, such as an underline.
  • Screen Reader users may choose to navigate by links instead of reading the full page, so anchor text needs to make sense without the surrounding sentences or content. When this is not possible use the visually hidden component to supply additional information to users.

Note: The title attribute was not included because it is not exposed by all browsers in an accessible way, meaning that users navigating with assistive technology may never see that information.


Composition

Anchors inherit font size and alignment from their parent container.

Make sure to always include a valid href and anchor text that conveys the function, purpose, or destination of the anchor. Avoid ambiguous anchor text, such as ‘click here’ or ‘more’. When possible avoid using the same anchor text for anchors that take users to different content.


Examples

Primary

The primary link is the most common variation and can be used on any light background.

Inverse

Inverse anchors are designed to be accessible on dark backgrounds.

Note: Inverse anchors are not accessible on SendGrid Blue backgrounds, use a button instead.

Text

Text anchors inherit their parent's color for the default state. This variation should be used sparingly and should be used in instances where it is obvious that it is a hyperlink, such as a reference in a list of references.

External Link

If an external anchor is used for the href prop, the target and rel will automatically be set for security purposes.

target = "\_blank"

rel = "noreferrer noopener"

However, the target and rel property can be overridden using the target and rel props

Primary, No Underline

Every anchor variation has an option to get rid of the underline. Anchors without an underline should only be used when it is obvious that the text is an anchor. Consider using an icon as an additional indicator that the text is an anchor for anchors without an underline.

Icon

Anchors may include an icon from one of the Match icon libraries.