A link should have an underline mainly on hover, so the user understands that the link is clickable.
- The exception is when a link is hard to see in a body text, and in that case the link can be underlined at all time
Do's and don'ts
- If the background is in a darker color, it’s recommended to have the link in white with an underline. The text should be in a medium size.
- Button versus links: In most cases buttons are used for actions and links for navigation.
- When a link is used in a flow and has an icon, the icon should be placed in the same direction as the flow. So for example when a user should go through a wizard flow - from left to right. The icon should then be placed on the right side of the link. Otherwise the icon should be placed on the left side of the link.
- Don’t use arrows in a list of links, because it can be interpreted as an accordion.
- Avoid making links of a complete section of body text
- Link: Dark blue 2, medium
- Hover: Dark blue 2, underlined