Link
Links are interactive text elements that navigate users to different sections within the application or external websites.
Last updated
Links are interactive text elements that navigate users to different sections within the application or external websites.
Last updated
Links are critical for navigation and interaction, providing users with a direct path to key areas or information.
Use links when referencing related topics, providing additional reading material, or expanding on a subject with supporting documentation.
Use a link when the action is less prominent, like ‘Learn More’ or ‘Read Details,’ where a button may not be necessary.
When needing a subtle but clear callout within body text, links are effective for embedding navigation.
Links should always be used with a clear and distinguishable style from body text, by using underline or color change.
Do not use links for major actions like “Submit” or “Save” where buttons provide more prominence and action clarity.
Avoid using links when the action requires a button's visual weight, such as “Buy Now” or “Proceed to Checkout.”
Links should not be used for static text or decorative purposes. They are meant for navigation and interactions.
Do not rely solely on links for critical navigation paths; ensure there are complementary navigation tools like menus or buttons.
Avoid placing icons on both sides of the link, this can overwhelm the user visually and make the link less accessible. Only use an icon on one side (left or right).
Accent
Stands out for key actions or high-importance navigation.
Primary
Default link style, used for most typical navigation cases.
Secondary
Subtle link, used for less prominent actions or navigation.
Inverse
Contrasts with dark backgrounds, maintaining visibility and clarity.
Icon (Left-aligned): An icon placed to the left of the text, helping to visually indicate action or direction.
Text: The clickable text that conveys where the link will lead, providing clear and concise navigation.
Icon (Right-aligned): An optional icon that complements the action, such as an arrow pointing toward the link’s next destination.
Small
12
16
Medium
14
18
Large
16
24
Clear and Descriptive Text: Ensure that link text is descriptive and provides context about where the link will lead. Avoid vague phrases like “Click here.”
Keyboard Navigability: Links should be fully accessible via keyboard navigation, and it should be clear when a link is in focus.
Sufficient Color Contrast: Links should have a high contrast ratio with surrounding text and background, ensuring that they are easily identifiable as interactive elements.
Unique Link Text: Avoid using the same link text in the same document to target different pages or actions. This prevents confusion for screen readers and helps users understand where each link leads.
Consistent Styling: Ensure that all links within a single document follow the same style, such as underline or color, to maintain visual consistency and accessibility. This helps users quickly recognize and differentiate interactive elements.
Redirect to External Resources: Provide links to external articles or support documentation, such as “Learn more about our Privacy Policy.”
In-Text Navigation: Embed links within paragraphs for quick access to related topics, like “Read about our latest updates here.”
Linking to User Settings: Use links within notifications or prompts to direct users to their account settings or profile: “Update your password here.”
