Text link
Text links are lightweight navigational elements. Links can appear within a paragraph, after a paragraph, standalone, or in a list of other links. They are underlined by default.
- CSS
- Marko
- React
Clear
The link text makes it clear where it will take the user.
Identifiable
Links are familiar and easily identifiable amongst other content.
Concise
Link text is short. Aim for fewer than 5 words.
When to use
- Navigating within the app
- Navigating externally
- Navigating to an element on a page (anchor link)
- Email addresses and phone numbers
When not to use
- Actions that manipulate data or how its displayed
- Actions that change state
- Navigating to legal links
Text links vs Link buttons
If an action results in a URL change or new browser tab use a Text link. Everything else is a Button.
Semantics
HTML text links and buttons have important differences in behaviors, interactions and expectations. For example, a Text link will perform its interaction when clicked and when the enter key is pressed. A Button will perform its interaction when clicked and when the enter and spacebar keys are pressed. When holding the control or command key a Text link will open a new browser tab, a Button will not.
Buttons take action, links navigate
- Use a link when you’re navigating to another place, such as: an item page, a seller profile, a page "skip link" etc.
- Use a button when you are performing an action, such as: "bid," "add," "search," etc.
