SmartLink

A component for links that automatically detects whether the link is internal or external and adjusts the target and rel attributes accordingly, along with rendering a small indicator if external.

Should be used in most cases over HTML <a>, next/link, and Joy UI's Link component. (When using SmartLink is not an option, go for Joy UI's component over the other two.)

Props

The same as Joy UI's Link component, as well as:

hideExternalIndicator: Don't show the external indicator, even if the link is external.

Examples

Various internal and external links

Props section
Home
example.com

1<Paragraph box>
2  <SmartLink href="#props">Props section</SmartLink><br />
3  <SmartLink href="/">Home</SmartLink><br />
4  <SmartLink href="https://www.example.com">example.com</SmartLink>
5</Paragraph>

1<Paragraph box>
2  <SmartLink href="#props">Props section</SmartLink><br />
3  <SmartLink href="/">Home</SmartLink><br />
4  <SmartLink href="https://www.example.com">example.com</SmartLink>
5</Paragraph>

.css-1gf1up0{--Icon-fontSize:calc(1em * 1);margin:var(--Typography-margin, 0px);display:inline;font-size:var(--Typography-fontSize, inherit);display:inline;}.css-1gf1up0>.MuiTypography-endDecorator{display:none;}.css-1gf1up0:hover>.MuiTypography-endDecorator{display:inline;}SmartLink

Examples

Various internal and external links

See also

SmartLink