Link

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

<Link href="#" onClick={(e) => e.preventDefault()}>
Link
</Link>
<br />
<Link href="#" onClick={(e) => e.preventDefault()} color="warning" variant='button'>
Link 2
</Link>

Props

PropTypeDefaultDescription
childrennodeThe content of the link.
classesobjectOverride 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"
componentelement 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.
TypographyClassesobjectclasses prop applied to the Typography element.
underline'none' | 'hover' | 'always''hover'Controls when the link should have an underline.
variant'link' | 'button''link'Applies the theme typography styles.