Link

Renders as <a>. Composes Typography - all typographic scale, color, spacing, and layout props are inherited. Adds underline, and defaults color to "primary" and variant to "inherit".

Setting target="_blank" automatically injects rel="noopener noreferrer" unless rel is explicitly provided.

Examples

Default

Visit the design system docs

<Link href="#">Visit the design system docs</Link>

Underline

alwaysunderline="always"

hoverHover to see underline

noneunderline="none"

<Flex>
  {linkUnderlineTokens.map((u) => (
    <Flex key={u} flexDirection="row" alignItems="center" mb={2}>
      <Typography variant="caption" color="secondary" width="4rem" flexShrink={0} m={0}>
        {u}
      </Typography>
      <Link href="#" underline={u}>
        {u === 'hover' ? 'Hover to see underline' : `underline="${u}"`}
      </Link>
    </Flex>
  ))}
</Flex>

Colors

inheritinherit

initialinitial

primaryprimary

secondarysecondary

disableddisabled

errorerror

successsuccess

infoinfo

warningwarning

const props: Partial<LinkProps> = {}

<Flex>
  {textColorTokens.map((c) => (
    <Flex key={c} flexDirection="row" alignItems="center" mb={1}>
      <Typography variant="caption" width="6rem" flexShrink={0} m={0} color="secondary">
        {c}
      </Typography>
      <Link href="#" {...props} color={c}>
        {c}
      </Link>
    </Flex>
  ))}
</Flex>

Variants

h1h1 link

h2h2 link

h3h3 link

h4h4 link

h5h5 link

h6h6 link

subtitle1subtitle1 link

subtitle2subtitle2 link

body1body1 link

body2body2 link

captioncaption link

overlineoverline link

buttonbutton link

inheritinherit link

<Flex>
  {typographyVariantTokens.map((v) => (
    <Flex key={v} flexDirection="row" alignItems="center" mb={1}>
      <Typography variant="caption" color="secondary" width="6rem" flexShrink={0} m={0}>
        {v}
      </Typography>
      <Link href="#" variant={v} m={0}>
        {v} link
      </Link>
    </Flex>
  ))}
</Flex>

Inline Prose

The design system is built with Emotion and styled-system. All components resolve color, spacing, and typography from theme tokens - see the design-system docs for details.

<Typography variant="body1" maxWidth="480px">
  The design system is built with <Link href="#">Emotion</Link> and{' '}
  <Link href="#">styled-system</Link>. All components resolve color, spacing, and typography
  from theme tokens - see the{' '}
  <Link href="#" underline="hover" color="secondary">
    design-system docs
  </Link>{' '}
  for details.
</Typography>

Link API reference