Guiding principle: Design for everyone.
Generally, do underline links when they are in:
Generally, do not underline links when they are in big navigation panels such as:
Only break these rules if underlining or not underlining starts to impact readability. See the accessibility section for more on this.
If the user is in the middle of a transaction or form, links should open in a new window.
If a link is opening in a new window or tab, include this standard icon at the end of the link: .
Only pair icons when the link is in a list, never within a paragraph.
Icons you can pair with links include:
Underline links as much as possible until it starts impacting readability – use your judgement. For example, if you have a long bulleted list of links, it may look a little overwhelming or distracting if they are all underlined – this would be a time when not underlining links will help readability.
If you are not sure how underlining links will impact readability, you can test with some users.
If you have other suggestions, advice or any questions on links, the design system team would love to hear from you.