Design

Link (-button)

A link-button refers to a user interface element in digital products that combines the functionality of a link (to navigate to a different page or resource) with the visual appearance of a button.

Structure & States

The link button can occur in various states, which are described as follows:

Default:

Text color: light green (#65AC1E)
Opacity: 100%

Hover:

Text color: light green (#65AC1E)
Underline: 2px, light green (#65AC1E)
Opacity: 100%

Disabled:

Text color: light green (#65AC1E)
Opacity: 40%

Use case

The main advantage of using link-buttons is that they provide a more visually distinct and prominent way to represent navigation actions, compared to traditional text links. Therefore, they are typically used to help draw the user's attention to important navigation actions, like navigation to a different subpage or resource.

You can use the link button with or without an icon. If the link is external, an arrow icon will be added automatically. If the link is an email, a mail icon will be added. No icon will be displayed for an internal link.

Best practice

For link-buttons, almost the same applies as for regular buttons: concise labeling is key. Furthermore, it is important to note that link-buttons should maintain the expected behavior and accessibility characteristics of both links and buttons, as they are a mix of both. In general, the hyperlink button is primarily used within text and can be embedded into it.