Components

Links

Links signal an action that will let the user navigate to another view, 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 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)
  • Links that open a non-web URI (e.g. "mailto:" "tel:" links)

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

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