Link
A Link navigates the user to another page, view or section, when the user presses it.
Overview
When to use Link
Use the Link component when you need to provide users with a clickable element to navigate to a different page, resource, or section in the same page.
Apart from links that navigate to other pages, there are the following different links:
- 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 solely a new page (external links)
- 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.
Avoid using Link when the user needs to perform an action. In such cases, use Button instead. Learn more about the usage of links and buttons.
About Link
Link includes the following element.
Link text
The text that describes the link destination as clearly as possible.
By default, the Link text style is set to the base font in regular. However, it can be easily customized to other styles by applying any of the existing fonts, text sizes or formats defined in our font design tokens.
Highlight only the phrase that indicates the link destination. Translatable
Avoid using the words click, tap or here. Avoiding these terms makes things clear and precise, whether the reader is using an assistive device, a mobile device or a desktop experience. Accessible
Examples
Visit a link to check visited link styles.
Base Link
Base Links signal to users the option to navigate to a different page, view, or resource.
The cat (Felis catus) is a domestic species of small carnivorous mammal.
Underlined Link
By default, Links are only underlined when they are interacted with (hover over or pressed). To suit user preferences and for accessibility reasons, Links can always be underlined.
As a predator, it is crepuscular, i.e. most active at dawn and dusk.
External Link
The external link icon indicates that the link will take the user to a different website. This icon cannot be replaced with other icons.
According to "Living with a Cat", cats are ready to go to new homes at about 12 weeks of age.
Red Link
Red links navigate to pages that do not exist yet.
Websites for cat lovers include The Catnip Times and Vanggy.
Technical implementation
Less mixin usage
Less mixin
This component has been implemented as a Less mixin, not a Vue component. This mixin must be imported separately in your Less styles. Check below for usage information.
WARNING
Before importing the Link mixin, you must first import the design tokens. If you don't, you will get errors that look like variable @color-progressive is undefined
.
Default usage
To use base, underlined, and red Link styles, apply the .cdx-mixin-link()
mixin to a link class or to all anchor elements. This will automatically apply underline styles to links with the .is-underlined
class, and red link styles to links with the .is-red-link
class.
In ancient Egypt, cats were worshipped.
In ancient Egypt, cats were worshipped.
In ancient Egypt, cats were worshipped.
With custom CSS selectors
Alternately, you can apply sub-mixins directly to your own CSS selectors. The sub-mixins are:
.cdx-mixin-link-base()
.cdx-mixin-link-underlined()
.cdx-mixin-link-red()
The domestic cat is a cosmopolitan species.
The domestic cat is a cosmopolitan species.
The domestic cat is a cosmopolitan species.
Keyboard navigation
Key | Function |
---|---|
Enter | If the Link is focused, it opens the Link. |