Skip to content
Change the site theme


An Anchor is text that navigates the user from one webpage to another.


Guidelines page anchor

About anchors

About anchors page anchor

The anchor can be used to hyperlink to another URL. It accepts both internal and external URLs.

Example use cases may include:

  • Linking to another page within an app or website
  • Linking to an external domain outside of the current app or website

Anchor vs. Button

Anchor vs. Button page anchor

Anchors should be used in place of a button if you only need to create a hyperlink to some other page or content. Anchors should not be used for submitting a form, closing a modal, moving to the next step in a flow, or any other click action that a button should handle. Buttons perform an action, like submitting a form; Anchors take you somewhere, like to the documentation page.

If you need a click handler, you can use our Button component.

The anchor is built with standard accessible practices in mind. Those include an href attribute, link context, and opening and closing tags.

The title attribute was not included because it’s not exposed to all browsers in an accessible way, meaning most screen readers and touch-only devices will likely never see that information.

All anchor text should be written succinctly and make sense on its own (e.g., don't write "Click here"). This is especially important for users of assistive technology who often navigate through a list of all actions on a page, meaning they might not know about any contextual information surrounding a given action.

The default anchor is a basic text hyperlink. There are no other anchor variants at this time.

If an external URL is used for the href, the target and rel will automatically be updated to:

target=”_blank” rel=”noreferrer noopener”

This is done for security purposes. Even though the target and rel are set by default for external anchors, they can be overridden using the target and rel props.

You can show the link external icon by setting the showExternal prop.

To internationalize an Anchor, simply pass an i18nExternalLinkLabel prop to the Anchor, with the value wrapped in parentheses. The value should be a translation of the phrase "link takes you to an external page", to indicate that the showExternal link will open the link in a new URL.

You can use an anchor to navigate the user to another webpage.


Anchors should only be used to link to another page, app, or another website.


Don’t use an anchor where a button makes more sense, i.e., closing a modal.

Using Anchor with a router

Using Anchor with a router page anchor

There are many different React based routers. For example there is:

They unfortunately all work slightly differently, have different APIs, and many versions that an application might have installed. We want Paste to be used in as many different applications as possible and as such, we have chosen to not support any one router.

Anchor is just a styled HTML anchor element. You should be able to use it with any React based router. It just means that you need to do a little work to wire it up inside your application.

There are many different ways you can achieve this based on the router you are using, but as an example we include a Codesandbox below using React Router(link takes you to an external page), to give you a rough guide on how you might approach it.

yarn add @twilio-paste/anchor - or - yarn add @twilio-paste/core
import {Anchor} from '@twilio-paste/core/anchor';
const Component = () => <Anchor href="">Go to Paste</Anchor>;
href?stringA URL to route to. Required.null
rel?stringSets the anchor rel attribute. If external href, defaults to 'noreferrer noopener'. Can be overwritten.false
showExternal?booleanShows the link external icon.false
tabindex?AnchorTabIndexes'0', '-1'null
target?AnchorTargets'_self', '_blank', '_parent', '_top'. If external href, defaults to '_blank'. Can be overwritten.null
variant?AnchorVariants'default', 'inverse''default'
onClick?(event: React.MouseEvent<HTMLElement>)null
onFocus?(event: React.FocusEvent<HTMLElement>)null
onBlur?(event: React.FocusEvent<HTMLElement>)null
i18nExternalLinkLabelstringTitle for showExternal icon'(link takes you to an external page)'
element?stringOverrides the default element name to apply unique styles with the Customization Provider'ANCHOR'

Black lives matter.