SINGULARITY
DOCS
Nextjs
Reference
Links
The Link component enables seamless customization of anchor elements using your theme’s colors and typography styles.
Basic links
The Link component is built upon the Typography component, allowing you to utilize its properties.
/* eslint-disable jsx-a11y/anchor-is-valid */
import * as React from 'react';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();
export default function Links() {
return (
<Box
sx={{
typography: 'body1',
'& > :not(style) ~ :not(style)': {
ml: 2,
},
}}
onClick={preventDefault}
>
<Link href="#">Link</Link>
<Link href="#" color="inherit">
{'color="inherit"'}
</Link>
<Link href="#" variant="body2">
{'variant="body2"'}
</Link>
</Box>
);
}The Link component, however, has distinct default properties compared to the Typography component:
color="primary"to ensure the link stands out prominently.variant="inherit"since the link is typically used as a child of a Typography component.
Underline
The
underline prop allows you to control the underline behavior, with always as the default setting./* eslint-disable jsx-a11y/anchor-is-valid */
import * as React from 'react';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();
export default function UnderlineLink() {
return (
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
typography: 'body1',
'& > :not(style) ~ :not(style)': {
ml: 2,
},
}}
onClick={preventDefault}
>
<Link href="#" underline="none">
{'underline="none"'}
</Link>
<Link href="#" underline="hover">
{'underline="hover"'}
</Link>
<Link href="#" underline="always">
{'underline="always"'}
</Link>
</Box>
);
}Security
When using
target="_blank" with Links, it’s advised to always include rel="noopener" or rel="noreferrer" for links to third-party content.rel="noopener"prevents the linked page from accessing thewindow.openerproperty and ensures it operates in a separate process, protecting against potential redirects to malicious URLs.rel="noreferrer"provides the same protection while also suppressing the Referer header from being sent to the new page. ⚠️ Note that omitting the referrer header may impact analytics.
Third-party routing library
A common scenario is to enable client-side navigation without a server round-trip. The
Link component supports this through the component prop. Refer to this detailed guide for more information.Accessibility
(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/link/)
- Avoid vague link descriptions like “click here” or “go to” when providing link content. Instead, use descriptive text for clarity.
- For optimal user experience, links should visually distinguish themselves from surrounding text. For example, you can retain the default
underline="always"behavior. - If a link lacks a meaningful href, it should be rendered as a
<button>element, as outlined in this guideline. The example below demonstrates proper linking with a<button>:
/* eslint-disable jsx-a11y/anchor-is-valid */
import * as React from 'react';
import Link from '@mui/material/Link';
export default function ButtonLink() {
return (
<Link
component="button"
variant="body2"
onClick={() => {
console.info("I'm a button.");
}}
>
Button Link
</Link>
);
}Keyboard accessibility
- Interactive elements should receive focus in a logical sequence when the user presses the Tab key.
- Users should be able to activate a link by pressing the Enter key.
Screen reader accessibility
- When a link gains focus, screen readers should vocalize a clear and descriptive link name. For links opening in a new window or tab, include an
aria-labelto notify screen reader users—for example, “Visit the About page, which opens in a new window, for more details.”