Links

<p class="description">The Link component allows you to easily customize anchor elements with your theme colors and typography styles.</p>

{{"component": "@mui/internal-core-docs/ComponentLinkHeader"}}

Basic links

The Link component is built on top of the Typography component, meaning that you can use its props.

{{"demo": "Links.js"}}

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.

{{"demo": "UnderlineLink.js"}}

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.

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.
• 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 <button> element. The demo below illustrates how to properly link with a <button>:

{{"demo": "ButtonLink.js"}}

Keyboard accessibility

• Interactive elements should receive focus in a coherent order when the user presses the <kbd class="key">Tab</kbd> key.
• Users should be able to open a link by pressing <kbd class="key">Enter</kbd>.

Screen reader accessibility

• When a link receives focus, screen readers should announce a descriptive link name. If the link opens in a new window or browser tab, add an aria-label to inform screen reader users—for example, "To learn more, visit the About page which opens in a new window."