Link

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

Quiet

When the surrounding context implies this is a link (i.e. in a list, menu or navigation), the quiet version may be used.

<Link href="#" onClick={(e) => e.preventDefault()} linkVariant='primary' context='quiet'>
  Primary (Quiet)
</Link>
<br />
<Link href="#" onClick={(e) => e.preventDefault()}  linkVariant='dark' context='quiet'>
  On dark background : Primary (Quiet)
</Link>
<br />
<Link href="#" onClick={(e) => e.preventDefault()} linkVariant='secondary' context='quiet'>
  Secondary (Quiet)
</Link>
<br />
<Link href="#" onClick={(e) => e.preventDefault()} linkVariant='name' context='quiet'>
  Name (Quiet)
</Link>
<br />

Explicit

When a link doesn’t have surrounding context making it clear that it is a link, then for the most accessible experience, the explicit version should be used.

<Link href="#" onClick={(e) => e.preventDefault()} linkVariant='primary' context='explicit'>
  Primary (Explicit)
</Link>
<br />
<Link href="#" onClick={(e) => e.preventDefault()} linkVariant='dark' context='explicit'>
  On dark background : Primary (Explicit)
</Link>
<br />
<Link href="#" onClick={(e) => e.preventDefault()} linkVariant='secondary' context='explicit'>
  Secondary (Explicit)
</Link>
<br />
<Link href="#" onClick={(e) => e.preventDefault()} linkVariant='name' context='explicit'>
   Name (Explicit)
</Link>

Props

Prop	Type	Default	Description
children	node		The content of the link.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'success' \| 'info' \| 'warning' \| 'error'	'info'	The color of the link, only useable with variant="button"
component	element type	'a'	The component used for the root node. Either a string to use a HTML element or a component. ⚠️ Needs to be able to hold a ref.
TypographyClasses	object		classes prop applied to the Typography element.
underline	'none' \| 'hover' \| 'always'	'hover'	Controls when the link should have an underline.
variant	'button'	'link'	Applies the theme typography styles.
linkVariant	'primary' \| 'secondary' \| 'dark' \| 'name'	'primary'	Applies the Link styles.
context	'quiet' \| 'explicit'	'quiet'	Defines the context of the link.
type	string		Specifies the type of the link.
href	string		Specifies the URL of the page the link goes to.
target	'_blank' \| '_self' \| '_parent' \| '_top'	'_self'	Specifies where to open the linked document.
rel	'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'noopener' \| 'prev' \| 'search' \| 'tag'		Specifies the relationship between the current document and the linked document.
to	string		Specifies the destination of the link. This is useful when using routing libraries like react-router.
onClick	function		Specifies the script to be run when a click event occurs.
sx	object	{}	The sx prop lets you style elements inline, using a style object that is picked up by the system.
css	object	{}	The css prop lets you style elements inline, using a style object.
id	string		The id of the element.
key	string \| number		The key of the element. This is useful in lists for performance reasons.
passHref	boolean	false	Allows the href to be passed to the child component.
data-testid	string		data-testid added to the root element of the component
aria-label	string		The aria-label attribute defines a string value that labels an interactive element.
aria-labelledby	string		Identifies the element (or elements) that labels the element it is applied to.
aria-describedby	string		Identifies the element (or elements) that describes the element on which the attribute is set.
onMouseOver	function		Specifies the script to be run when a mouse goes over the element.
onMouseLeave	function		Specifies the script to be run when a mouse leaves the element.
role	string		Specifies the role of the link.
tabIndex	number		Specifies the tab order of the link.
download	boolean	false	Specifies that the target will be downloaded when a user clicks on the hyperlink.