Link

Atom

Links are as their name suggest are UI elements that allow users to navigate to a desired page, view or state of the app. They sometimes accompany AppButtons and/or passages of text. Unlike App Buttons, clicking on a 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.

INFO

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);
  }
}

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

Anatomy

1. Container: The clickable area that encloses the icon.
2. Text: 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 using a Tooltip. The first letter of the first word and proper names should be capitalized.
3. Icon (leading or trailing) - 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.

States

Default, Hover, Focus and Locked

Variants

Type

• 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.
• Secondary Links - are 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.
• Tertiary Links - are the least critical links in the user journey. Examples are footer navigation links etc.