Skip to main content

Link button

Since 2.0.0

Guidelines

Link buttons are simple button components that lead users to another location within the application or outside of it. Link buttons contain a chevron and a text label.

Overview

  1. Chevron
  2. Label

Options

  • Disabled: Link buttons can be disabled (see also button states).
  • Target: To define where a link opens, there are four options:
ValueDescription
_selfopens the document in the same window/tab
_blankopens the document in a new window/tab
_parentopens the document in the parent frame
_topopens the document in the full body of the window

(Reference: https://www.w3schools.com/html/html_links.asp)

  • URL: Specify the link destination.

Behavior in context

  • Interaction: Link buttons can be triggered by pressing anywhere within the button area. When link buttons are focused, they can be triggered by pressing Enter.
  • Placement: We typically place link buttons below or next to related content but not within paragraphs. It's also possible to place multiple link buttons on top of each other to create link lists.
  • Line length: Link buttons cannot support line break or text truncation. Link button texts are displayed in one line. If there is not enough space, the complete link text is not visible.

States

Link buttons take five states: Default, hover, active, disabled and focused. On hover, the link destination is shown. In a disabled state, link buttons are visually displayed but don't offer any user interaction.

States

Dos and Don'ts

  • Do use link buttons for navigation
  • Don't use link buttons to indicate actions
  • Don't place link buttons within a paragraph