Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
Components

Links

Links signal an action that will let the user navigate to another page, view or resource, when they click or tap on them. The following examples are emphasized in bold for presentation only.

link visual example

Using links

Links must include a descriptive link text or a combination of the text and an additional icon.

Designing

Link text
Link text should describe the assigned action as clear and short as possible in active voice (e.g. download, submit form, search).

Icon (optional)
Icons simplify user recognition and provide ability to shorten link text to a minimum. Icons should be limited to differentiate from a standard hyperlink (i.e. if it does something other than navigating to a new page). In contrast to buttons, icons are only allowed additionally to link text, not as only link signifier.

Examples of non-standard links include:

  • Links that open a modal instead of a new page (e.g. map links)
  • Links that open a file instead of a web page (e.g. PDF or document links)
  • Links that cause something to happen that the user would otherwise not expect (e.g. play a sound, like pronunciation links)
  • Links that open a new website instead of just a new page (external links)[1]
  • Links that open a non-web protocol URI (e.g. mailto:, tel: links)

Several Wikimedia Movement projects provide extensive “manuals of style” for applying and designing for links, for example English Wikipedia.[2]

See WikimediaUI Figma links component.

States of links

The link styles outlined here were designed with accessible color variations to distinguish the link’s following visually separated interaction states:

links states

Links focus outline is the default browser focus, here Blink based browsers only with outline color amendment to Accent50. This varies in different browsers.
Links don't feature a disabled state. Consider using quiet buttons for those applications instead.

Types

By default, links are only underlined on interaction (hover, active).

Underlined links

To suit user preference and for accessibility reasons MediaWiki also provides a setting to always underline links.

Links of underlined type, visual example

New links

A speciality of wiki software and MediaWiki are so called “new links”. Links to article and pages that are yet to be written. These apply Red50 in both, normal or underlined type.

Links of underlined type, visual example

References

  1. English Wikipedia: External links
  2. English Wikipedia: Manual of Style/Linking