...
A link allows users to move through applications and websites. Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.
...
Variations
Primary Large Icon Text http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--primary-large-icon-text&viewMode=story
Primary Large Icon http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--primary-large-icon&args=&viewMode=story
Primary Small Icon Text http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--primary-small-icon-text&args=&viewMode=story
Primary Small Icon http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--primary-small-icon&args=&viewMode=story
Secondary Large Icon Text http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--secondary-large-icon-text&args=&viewMode=story
Secondary Large Icon http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--secondary-large-icon&args=&viewMode=story
Secondary Small Icon Text http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--secondary-small-icon-text&args=&viewMode=story
Secondary Small Icon http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--secondary-small-icon&args=&viewMode=story
...
Anatomy
Link anatomy:
Label
Leading icon (optional).
...
Link appearance can be quite similar to button or CTA. Usually, if the user is making changes to the back or front-end of the site when clicking, you should use a button. If the user is being directed to a different page, you can use a link.
...
Visual Style
Designs
...
Two key things for all links:
They have a focus state (it may adjust on certain components, but anything linked – even an image or logo etc. – would take the default focus ring unless specified otherwise);
If the source is external, an “external link” icon would be applied.
...
There are two size variants for the link component: small and large. The link size should match the type size of the text it is inline with. When using links apart from other content, the link size should match the default body copy size of the page.
Examples
...
Usage
Use when
Use links when you want users to navigate to a different page within the application, navigate to an entirely different site, go to an element on the same page, link to emails or phone numbers.
...