import { LinkOverlay } from "styled-system/jsx";The link overlay pattern is used to expand a link's clickable area to its nearest
parent with position: relative.
This pattern replaces the LinkOverlay component with a <a> element, allowing
the link to expand to its nearest parent and passing all props through.
One of the side-effects of this technique is that the content can't be "selectable" (i.e. with a pointing device), however, this seems to be pretty uncommon in web design.
LinkOverlay accepts all CSS properties and that of an <a> element.
On this page
import { LinkOverlay, Stack } from '@/styled-system/jsx'
import { Text } from '@cerberus/react'
export function BasicDemo() {
return (
<Stack position="relative">
<Text as="h4" textStyle="heading-sm">
Wanna try it out?
</Text>
<Text color="page.text.100">
This entire area below is a link. Hover it to see the effect.
</Text>
<LinkOverlay
href="#"
textDecoration="underline"
_hover={{
bgColor: 'action.bg.hover',
}}
>
Click me
</LinkOverlay>
</Stack>
)
}