Links
A link visually represents clickable text or elements that navigate users to other pages, sections, or resources. Links appear colored to indicate interactivity and follow accessibility and design standards for clarity and usability.
When to use
- For navigation to internal or external destinations. Use external link icon in the latter case.
- For inline standalone contextual actions (for example, Learn more).
- Avoid using links for actions; use ghost buttons instead.
Should I use a button or a link?
A link should be used when navigating between pages, while a button should be used for actions like submitting a form, downloading a file, or triggering a task.
- Use a link for View more articles.
- Use a button for Submit form.
Style
- Use meaningful, descriptive link text.
| Do | Don’t |
|---|---|
| View pipeline details | Click here |
- Avoid standalone icons as links unless accompanied by an accessible label.
- Use sentence case and no terminal punctuation.
- Keep links clear, concise, accessible, and consistent.
Behavior
- Links open in the same tab unless explicitly labeled as external.
- Underline on hover for clarity.
- Visited state should be visually distinct whether inline or standalone.
Clear and descriptive link text
Link text should clearly describe the destination or action. Avoid vague text that does not convey enough information to the user or to assistive technologies.
| Do | Don’t |
|---|---|
| View your order details | Click here |
| Visit our home page | http://example.com |
| Download report | Get report |
| Explore features | Click to learn more |
| View our services | Click here to view our list of services |
Action-oriented language
Use action verbs for links that load tasks. Action-oriented language guides the user on what to expect. This is especially helpful for calls to action. Avoid passive or generic terms and phrases. Always provide clarity on what will happen or what the user will achieve by clicking.
Consistency in link text
Use consistent link phrases for similar actions. Similar actions should use the same link text to help users develop familiarity and expectations. For example, if you use Learn more for accessing detailed content in one area, avoid switching to Read details elsewhere. Keep link text brief but meaningful.
Avoid linking full sentences or paragraphs
Link only the specific, relevant portion of text. Avoid linking entire sentences or paragraphs, as this can overwhelm the user and reduce readability.
| Do | Don’t |
|---|---|
| Read our user experience design blog. | Click here to read our blog about user experience design. |