Resources
Intro & Anatomy
Links are interactive elements that enable users to navigate between pages, sections, or external resources. Use links for referencing additional content or navigating within and outside your website, e.g. directing users to related articles, external sources, or different page sections.
Links provide clear visual indication of their interactive nature and help users understand where they will be taken when activated.
MDX offers a standalone as well as an inline link component.
Options & Styles
Label & Icon
Labels are always required.
Icons are optional but shouldn't be decorative – only use them when necessary and when they strongly relate to the label text. Icons can be placed left or right of the label.
Variants
MDX offers 2 link variants for different contexts:
Standalone for independent navigation elements with optional left or right icons
Inline for links within body text without icons
Sizes
MDX links come in three different sizes:
small, medium and large.
Best Practice & Usage
Links should communicate their destination clearly using descriptive text that provides context about where users will navigate.
Use links for referencing content and navigation rather than triggering actions.
Use links to reference further content or navigate between web pages and sections.
Avoid using links for primary actions such as "Sign up" or form submission. Use buttons when triggering actions.
Use inline links within body text to link to further content on the same or external websites.
Avoid using links in headlines or titles. Consider using buttons for more prominent call-to-actions.
Use descriptive wording that provides context for links to be inclusive to users who use screen readers.
Avoid generic descriptions such as "learn more" or "click here". Clearly communicate the context and purpose of the link.
Use standalone links to navigate to different destinations, either internally or externally.
Avoid using standalone links within paragraphs. Use inline links instead.
Theming
You can customise colours, font styles and weights, and spacing.
When not using MDX icons, a slot is available to use your own icon library or SVG icons.