figma
storybook
react
i18nLink
Link is used for navigation.
If you use a link for triggering an action on the page, you must consider using a Button instead.
Still need to be convinced? Please, take the time to read this article written by Marcy Sutton.
Zoning
States
Default
With icon
Multi lines
Disabled
When the link is disabled the whole component is displayed with $opacity.disabled.
External
When the link targets a new domain, we add an external-link icon right after.
Even if it's the same domain, when the link opens in a new window or tab, the title open in a new tab is added or appended to an existing title.
The attribute rel="noopener noreferrer" is added if its target is _blank.
Router links
In React SPAs, most links are handled by libraries such as React Router. Link takes that into account.
As a button
In extreme cases we do not condone, you may need the style of a link but the behavior of a button.
If your action open a new tab, you can use the openInNewTab props to trigger the display of the external-link icon, and add open in a new tab in the link title.
| Name | Description | Default | Control |
|---|---|---|---|
| children | - | ||
| onClick | A callback function | - | - |
| icon | optional string | ReactElement<any, string | JSXElementConstructor<any>> | - | |
| disabled | optional boolean | - | |
| focusable | optional boolean | - | |
| unstable_system | Options passed to reakit-system-*any | - | |
| wrapElement | Function returned by the hook to wrap the element to which html props will be passed. (element: ReactNode) => ReactNode | - | - |
| type | "button""submit""reset" | - | |
| unstable_clickOnEnter | Whether or not trigger click on pressing Enter. boolean | - | |
| unstable_clickOnSpace | Whether or not trigger click on pressing Space. boolean | - | |
| openInNewTab | boolean | - |
Content
Link labels should be specific and clear enough to increase the likelihood that users will quickly understand the link as they scan and process the page. There's no maximum word count for links, but the best practice is to be as succinct as possible.
Use a meaningful link text which communicates to users what they'll exactly find on the other side of the click.
Make link text stand alone—it should make sense without any of the surrounding text as users tend to scan UI.
Frontload link text with keywords and use the rest of the label text to increase user understanding.
Avoid vague or repetative text for links. For example, don't use the text "Click here" or "See this document" for links.
- Don't use a URL as link text.
Interaction
Text underline appears while hovering the link and disappears as soon as the mouse is out of its clickable area with a smooth animation.
Accessibility
Press TABS to focus on a link
Press ENTER to open a link
Usage
| Name | Description | Default | Control |
|---|---|---|---|
| icon | Link icon before text as illustration string | ReactElement<any, string | JSXElementConstructor<any>> | - | |
| children | - | ||
| href | Link reference | - | |
| disabled | if the link is disabled boolean | - | |
| hideExternalIcon | Button has hidden text boolean | - | |
| as | Polymorphic prop to give this style to a button. string ReactComponentType.ReactElement<any, string | JSXElementConstructor<any>> | "a" | - | - |
| isNaturallyAligned | boolean | - | |
| withEllipsis | boolean | - |