Link

Usage

Links are as their name suggest are UI elements that allow users to navigate to the desired page, view or state of the app. They sometimes accompany AppButtons and/or passages of text. Clicking on the link will not affect the back-end of the application in any way. It will simply navigate the user to a different interface, application or open a pop-up interface or a webpage in the browser. Unlike App Buttons, that lets the users to manipulate the data, links simply navigate the users to a different interface.

Types

There are 2 types of Links: Hyperlinks: A hyperlink is a reference to data that the reader can follow by clicking or tapping. It is a clickable link that connects one web page to another, or to a different section of the same page. Hyperlinks can only be placed inside the text paragraph, they do not exist on their own. They are represented by an underline and/or colored text which is highlighted on hover. Standalone: These links have 3 variants that should be interchangeably used depending on the context and their relative importance in the page:

1. Primary Links - are typically used to support critical user flows enabling the user to navigate in their journey or access relevant data. For example: Previous/Next button, links to the download or delete modals, etc.
2. Secondary Links - are typically used for non-critical supporting navigation and actions that may not be relevant to the primary user journey. For example: resetting a filter, removing selection, going back.
3. Tertiary Links - are the least critical links in the user journey. Examples are footer navigation links, breadcrumbs, etc.

Anatomy and Behavior

Hyperlinks

1. Passage of text - Typically body or paragraph text. Sometimes it may also be a header or sub-header.
2. Hyperlink - can be anything from a single word to an entire descriptive sentence. It must be or start with a noun or verb. If there is a concern that the Text is not explicit enough, more information can be conveyed through a Tooltip.

Behavior Hyperlink follow the same typography and font size as the paragraph it belongs to. They are represented by an underline which is highlighted by a change in color on hover. A visited hyperlink is represented by an underline and a color. It is also highlighted with a change in color on hover.

Link (standalone)

1. Container: The clickable area that encloses the icon.
2. Link text: It can be an entity name, description or action. It must be concise yet inform users on what will happen next. It may use words of phrases. Recommended maximum character count is 32 and a good rule of thumb is not to exceed two words in a Button text. If there is a concern that the Text is not explicit enough, more information can be conveyed through a Popover or a Tooltip. The first letter of the first word and proper names should be capitalized.
3. Icon: is an optional property of Primary Link that can be disabled or enabled in the component properties. Link can be with no icon or only with one icon at a time. Icons are there to communicate the links action visually and to help draw attention. They can be either before text - Leading icon; or after - Trailing icon. Icons should clearly communicate their meaning and try to decrease the cognitive load for user. Secondary Links do not have an icon.

Gaps and Sizes

LINK PRIMARY AND SECONDARY (STANDALONE)

• Height: L plus
• Container width (default): adapts to the contents’ width (text, icon and - paddings)
• Padding left and right: 2XS
• Padding vertical: XS
• Space between Link Text and Icons: S
• Icon size: M
• Underline line thickness: 0.75px
• Underline offset: 1.5px

LINK TERTIARY (STANDALONE)

• Height: M plus
• Padding up and down: -
• Container width (default): adapts to the contents’ width
• Padding left and right: -
• Underline line thickness: 0.75px
• Underline offset: 1.5px

Recommendations for Designers Text width: min. L, max. 32 characters

States

Links can have the states of hover, active, focus, Disabled and Visited. Visited applies only to hyperlinks. Disabled state does not apply to Tertiary links and Hyperlinks.

Tokens

SCSS Variable

Value

$link-focus-border

--gutter-2xs

$link-color

--bds-brand-primary-color

$link-color--locked

--bds-brand-primary-color-locked

$link-outline-color--focus

--color-azure-45

$link-secondary-color

--color-grey-40

$link-secondary-color--hover

--color-grey-54

$link-secondary-color--locked

--color-grey-70

$link-tertiary-color

--color-grey-54

$link-tertiary-outline-color--focus

--color-azure-45

Typography:

• $linkPrimary-text: %button
• $linkTertiary-text: %hint-2

Properties

export type LinkProps =
  & ElementProps
  & TooltipProps
  & {
    to: string;
    text?: string | number;
    icon?: IconName;
    iconRight?: boolean;
    disabled?: boolean;
    target?: '_blank' | '_self' | '_parent' | '_top';
    type?: 'primary' | 'secondary' | 'tertiary';
  }

Configurations

Type	Link
	No Icon	Icon Left	Icon Right	Disabled
Primary	Link	Link	Link	Link
Secondary	Link	Link	Link	Link
Tertiary	Link	Link	Link	Link

The Hyperlink type is not an actual Vue component but only is a set of CSS rules that will be injected into your project when importing the DS.

a:not(.lnk, .btn) {
  @extend %paragraph;
  text-decoration: underline;
  color: var(--bds-primaryText-color);
  
  &:visited {
    color: var(--color-blue-45);
    &:hover {
      color: var(--color-blue-67);
    }
    &:active {
      color: var(--color-blue-45);
    }
  }
  
  &:hover {
    color: var(--color-blue-67);
  }
  
  &:active {
    color: var(--bds-primaryText-color);
  }
  
  &:focus-visible {
    color: var(--color-blue-45);
    border-radius: var(--gutter-3xs);
    -webkit-border-radius: var(--gutter-3xs);
    -moz-border-radius: var(--gutter-3xs);
    -ms-border-radius: var(--gutter-3xs);
    -o-border-radius: var(--gutter-3xs);
  }
}