CodexLink
A Link navigates the user to another page, view or section, when the user clicks or taps on it.
Guidelines
Using links
Links must include descriptive text, or a combination of text and an icon.
Use the Link component when you need to provide users with a clickable element to navigate to other pages. Avoid using Link when the user needs to perform an action. In such cases, use Button instead.
Specifications
- Link text
The text that describes the link destination as clearly as possible. - External link icon
Indicates that the link will take the user to a different website.
Apart from links that navigate to other pages, there are the following non-standard 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 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]
Refer to the Link component in Codex Figma.
Types
- Default links
By default, links are only underlined when they are interacted with (hover, active). - Underlined links
To suit user preferences and for accessibility reasons, links can always be underlined. - Red links (aka new links)
Links to pages that do not exist yet. These display the color Red600 for both the normal or underlined types.[3]
Interaction states
Links display accessible color variations that help clearly differentiate their interaction states:
Default link
Red link
- Default
- Hover
- Active
- Focus
- Visited
- Visited and hover
Links display the default browser outline on focus, which is equal to Blue600. The outline style varies in different browsers.
Links don't feature a disabled state. If you’re trying to convey an action, you might consider using a quiet button for that scenario instead.
References
- English Wikipedia: External links
- English Wikipedia: Manual of Style/Linking
- English Wikipedia: Red link
Demos
Click on a link to see visited link styles.
Standard link
The cat (Felis catus) is a domestic species of small carnivorous mammal.
Underlined link
As a predator, it is crepuscular, i.e. most active at dawn and dusk.
Link with icon
According to "Living with a Cat", cats are ready to go to new homes at about 12 weeks of age.
Red link
Websites for cat lovers include The Catnip Times and Vanggy.
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. See 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 standard, 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.