The Link component is a primitive anchor element with theme-aware styling and variant support.
import { Link } from 'theme-ui'
<Link href="/about">About</Link>
The URL to link to.<Link href="/page">Internal Link</Link>
<Link href="https://example.com">External Link</Link>
variant
string
default:"'styles.a'"
Link variant from theme.links. By default uses theme.styles.a.<Link variant="nav">Nav Link</Link>
<Link variant="button">Button-styled Link</Link>
Theme-aware styles for custom link appearance.<Link
href="/page"
sx={{
color: 'primary',
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline',
},
}}
>
Custom Link
</Link>
HTML target attribute. Use _blank for new tab.<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
Open in new tab
</Link>
HTML rel attribute for link relationship.
Inherited Props
Link extends Box and accepts:
- All standard HTML anchor attributes
- Box spacing props (m, p, mx, my, px, py, etc.)
- Box color props (color, bg, opacity)
Examples
Basic Link
<Link href="/about">About Us</Link>
External Link
<Link href="https://theme-ui.com" target="_blank" rel="noopener noreferrer">
Theme UI Documentation
</Link>
Navigation Link
<Link
href="/products"
variant="nav"
sx={{
fontSize: 2,
fontWeight: 'bold',
textDecoration: 'none',
}}
>
Products
</Link>
Button-styled 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 with Icon
<Link
href="/download"
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 2,
}}
>
Download
<svg>...</svg>
</Link>
Colored Link
<Link href="/info" color="primary">
More Info
</Link>
Underlined on Hover
<Link
href="/page"
sx={{
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline',
},
}}
>
Hover Me
</Link>
Active Link Style
<Link
href="/current"
sx={{
color: 'text',
'&[aria-current="page"]': {
color: 'primary',
fontWeight: 'bold',
},
}}
>
Current Page
</Link>
