...
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.
...