Getting started
Components
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"
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.
showExternal
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.
i18nExternalLinkLabel
Anchor text should indicate what kind of information the user can expect to find when they click the link. Avoid "Learn more" or "Click here," since they don't offer any indication of where the link will take the user.
When placing an Anchor within a sentence, don't link the whole sentence. Instead, only link the text that describes where the user will go when they follow the link.
When the link is at the end of a paragraph or block of text, avoid punctuation except for a question mark.
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.
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, to give you a rough guide on how you might approach it.
Source code | Storybook | All Components
Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.