Link

Atom

Links 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.

Playground

Icon

noneadd_home_workadd_layeradd_linkadd_useraialertanchor_chanelangleapplyappsapps_arrowarrows_outwardattachmentattic_wallavataraxesbackbugcalendarcheckcheck_filledchecklistchevron_downchevron_leftchevron_rightchevron_upcircleclosecloud_uploadcollapsecolumnsconstructioncoordinatescubecube_groupcustom_geometrydead_loaddiagonal_pindoordouble_chevron_downdouble_chevron_leftdouble_chevron_rightdouble_chevron_updownloaddownwardduplicatedusterdwgeditelement_core_layerelement_inside_layerelement_insulationelement_outside_layererrorexcelexpand_1expand_2export_fileseyeeye_hiddenfibernox_logofibernox_no_tipfilefilterfilter_dropdownfilter_dropdown_messagefilter_removefolderforwardfull_circlegearhelphidden_layerhomehome_workhorizontal_pinimage_arrow_upinfojva_fjva_njva_n_filledlanguagelayerlayoutlink_offlistlistsloadslockedloginlogoutmailmenuminusmore_optionsmultiple_layersnew_tabno_split_scenenotificationnotification_updateopeningoutputpluspohlcon_logopreviewquestionrectangleredoreloadremove_userrowsrulersandwich_core_layersandwich_insulationsandwich_outside_layersavescreen_with_appsscreen_with_downloadscreen_with_gearscreen_with_webscrollsearchsearch_layersearch_usersendsloped_side_wall_leftsloped_side_wall_rightsplit_scenestandard_wallstar_shinestar_usersumswatchswatch_alertsyncthermoticktrashundounlockeduploadupwarduservillavilla_addvilla_infowindowzoom_inzoom_out

none

Text

To

Type

PrimarySecondaryTertiaryHyperlink

Primary

Size

DefaultTiny

Default

Icon right

Disabled

        
          

            <
            Link

            





            

                icon
              
                =
                "plus"
              

                text
              
                =
                "This is a Link"
              

                type
              
                =
                "primary"
              

                size
              
                =
                "default"
              



  />

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 LinkType = 'primary' | 'secondary' | 'tertiary';

export type LinkProps<T extends LinkType = LinkType> =
  & ElementProps
  & {
    to?: string;
    text?: string | number;
    icon?: IconName;
    iconRight?: boolean;
    disabled?: boolean;
    target?: '_blank' | '_self' | '_parent' | '_top';
    type?: T;
    size?: T extends 'tertiary'
    ? 'default'
    : 'default' | 'tiny';
  }

Anatomy

1. Container - the clickable area that encloses the icon and text.
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 or phrases. Recommended maximum character count is 32 and a good rule of thumb is not to exceed two words in a Link 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, optional) - nested Icon component. 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 communicate the link’s action visually and help draw attention. They can be either before text (Leading) or after (Trailing). Icons should clearly communicate their meaning and try to decrease cognitive load. 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.

Size

• Default - is the standard link size used across most of the interface. It matches the base body text size, ensuring comfortable readability and tap target compliance.
• Tiny - is a smaller link variant designed for compact UI areas such as message cards, inline notices, and dense layouts where space is limited.