Skip to content
Edit this page

Links

The Link component allows you to easily customize anchor elements with your theme colors and typography styles.

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

Press Enter to start editing

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.

Press Enter to start editing

Security

When you use target="_blank" with Links, it is recommended 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.

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>:
Press Enter to start editing

Keyboard accessibility

  • Interactive elements should receive focus in a coherent order when the user presses the Tab key.
  • Users should be able to open a link by pressing Enter.

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."

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.