Overview
A link is a reference to a resource. This can be external (e.g. a different web page) or internal (e.g. a specific element in the current document).
When to use a link
Use a link to:
- Navigate to a different page within the application.
- Navigate to an entirely different site.
- Jump to an element on the same page.
- Connect to emails and phone numbers.
When not to use a link
Use a button instead for any action that changes data or its display, changes a state, or triggers another action.
Formatting
Anatomy
- Link label
- Icon (optional): ri-arrow-right-line
Variants
- Standalone: This is the default variant. Standalone links can be used on their own or directly following content. They are not styled with underlines. They can be paired with an icon.
- Inline: Inline links are used within running text, like a sentence. They're styled with underlines. They should not be paired with an icon.
Content
Do
- Choose concise labels.
- Accurately and meaningfully describe the destination.
- Set icons to the same color as the text.
Don't
- Use vague labels like, "click here."