A link is text with a hyperlink to either an internal or external page.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| isDisabled | bool | - | false | Disable link and interactivity |
| newWindow | bool | - | false | Open link in new window |
| children | node | yes | - | Text/node that is linked |
| href | string | - | - | Href for the anchor element |
| onClick | func | - | - | Click handler function |
| style | oneOf 'default' | 'dark' | 'muted' | 'bad-news' | 'reverse' | - | - | Link style options |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Use a link when the user needs to go to somewhere else in the application. The user can hold the command or control key while clicking a link to open in a new tab. Consider this when deciding to use a link or a button.
When you're leaving the application, the link should open in a new tab. Otherwise, it should open in the same tab.
Best Practices
Do
Make links short, don't use the full URL.
Use plain language for the link text.
Dont
Use links for actions. Consider using buttons instead.