Link Overlay

Used to stretch a link over a container.

Wanna try it out?

This entire area is a link. Click it to see the effect.

Usage

The LinkOverlay component provides a semantic way to link an entire component or card.

import { LinkBox, LinkOverlay } from "chakra-ui-solid";

<LinkBox>
  <LinkOverlay />
</LinkBox>

Examples

Article

Here’s an example of using LinkOverlay to link an entire article.

The inner link stays clickable because LinkBox lifts every anchor inside it above the overlay — every one except the overlay itself, which it excludes by class name.

Custom Link

Use the render prop to add support for a routing library’s own link component.

import { LinkBox, LinkOverlay } from "chakra-ui-solid";
import { A } from "@solidjs/router";
 
function Example() {
  return (
    <LinkBox as="article">
      <h2>
        <LinkOverlay href="#" render={(props) => <A {...props} />}>
          Blog Post Title
        </LinkOverlay>
      </h2>
      <p>Some blog post content</p>
      <A href="#inner-link">Some inner link</A>
    </LinkBox>
  );
}

Caveat

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.