Link

import { Link } from 'theme-ui'

<Link href="/about">About</Link>

<Link href="/about">About Us</Link>

<Link href="https://theme-ui.com" target="_blank" rel="noopener noreferrer">
  Theme UI Documentation
</Link>

<Link
  href="/products"
  variant="nav"
  sx={{
    fontSize: 2,
    fontWeight: 'bold',
    textDecoration: 'none',
  }}
>
  Products
</Link>

<Link
  href="/signup"
  sx={{
    display: 'inline-block',
    px: 4,
    py: 2,
    bg: 'primary',
    color: 'white',
    textDecoration: 'none',
    borderRadius: 4,
    '&:hover': {
      bg: 'secondary',
    },
  }}
>
  Sign Up
</Link>

<Link
  href="/download"
  sx={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: 2,
  }}
>
  Download
  <svg>...</svg>
</Link>

<Link href="/info" color="primary">
  More Info
</Link>

<Link
  href="/page"
  sx={{
    textDecoration: 'none',
    '&:hover': {
      textDecoration: 'underline',
    },
  }}
>
  Hover Me
</Link>

<Link
  href="/current"
  sx={{
    color: 'text',
    '&[aria-current="page"]': {
      color: 'primary',
      fontWeight: 'bold',
    },
  }}
>
  Current Page
</Link>