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.

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 (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]

States of links

The link styles outlined here were designed with accessible color variations to distinguish the link’s following visually separated states (e.g. disabled, hover, active):

links states

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

References

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