---
productId: material-ui
components: Link
githubLabel: 'scope: link'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/link/
githubSource: packages/mui-material/src/Link
---
# Links
The Link component allows you to easily customize anchor elements with your theme colors and typography styles.
## Basic links
The Link component is built on top of the [Typography](/material-ui/api/typography/) component, meaning that you can use its props.
```tsx
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 (
:not(style) ~ :not(style)': {
ml: 2,
},
}}
onClick={preventDefault}
>
Link
{'color="inherit"'}
{'variant="body2"'}
);
}
```
However, the Link component has some different default props than the Typography component:
- `color="primary"` as the link needs to stand out.
- `variant="inherit"` as the link will, most of the time, be used as a child of a Typography component.
## Underline
The `underline` prop can be used to set the underline behavior. The default is `always`.
```tsx
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 (
:not(style) ~ :not(style)': {
ml: 2,
},
}}
onClick={preventDefault}
>
{'underline="none"'}
{'underline="hover"'}
{'underline="always"'}
);
}
```
## Security
When you use `target="_blank"` with Links, it is [recommended](https://developers.google.com/web/tools/lighthouse/audits/noopener) to always set `rel="noopener"` or `rel="noreferrer"` when linking to third party content.
- `rel="noopener"` prevents the new page from being able to access the `window.opener` property and ensures it runs in a separate process.
Without this, the target page can potentially redirect your page to a malicious URL.
- `rel="noreferrer"` has the same effect, but also prevents the _Referer_ header from being sent to the new page.
⚠️ Removing the referrer header will affect analytics.
## Third-party routing library
One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server.
The `Link` component provides the `component` prop to handle this use case.
Here is a [more detailed guide](/material-ui/integrations/routing/#link).
## Accessibility
(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/link/)
- When providing the content for the link, avoid generic descriptions like "click here" or "go to".
Instead, use [specific descriptions](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text).
- For the best user experience, links should stand out from the text on the page. For instance, you can keep the default `underline="always"` behavior.
- If a link doesn't have a meaningful href, [it should be rendered using a `