LinkOverlay

LinkOverlay and LinkBox components are used to make entire card areas clickable while preserving the ability to have nested interactive elements like links and buttons.

import { LinkOverlay } from "@ninna-ui/primitives"

pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Use LinkBox as a container and LinkOverlay to make the entire area clickable.

import { LinkOverlay, LinkBox, Heading, Text } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <LinkBox className="p-4 border rounded-lg">
      <Heading as="h3">
        <LinkOverlay href="/article">
          Article Title
        </LinkOverlay>
      </Heading>
      <Text>Article description...</Text>
    </LinkBox>
  );
}

Basic

A simple clickable card using LinkBox and LinkOverlay.

Card Title

The entire card is clickable because of LinkOverlay.

Nested Links

Use relative z-10 class on nested links to make them clickable above the overlay.

Article Title

Written by John Doe

The author link is clickable separately from the card.

As Element

LinkBox can render as different semantic HTML elements.

Article Element

This LinkBox renders as an article element.

Section Element

This LinkBox renders as a section element.

External Links

LinkOverlay supports external links with proper security attributes.

External Link Card

This card opens an external link in a new tab.

Use Cases

Real-world examples of LinkOverlay component usage.

Technology

5 min read

Building Accessible UI Components

Learn how to create accessible and reusable UI components using modern React patterns.

Jane Smith

• Jan 15, 2024

Premium Subscription

Get access to all premium features and priority support.

$29/mo

Learn more

Documentation

Click to explore

API Reference

Click to explore

Examples

Click to explore

API Reference

Complete list of props for LinkBox and LinkOverlay components.

LinkBox Props

Props

Prop	Type	Default	Description
`as`	`'div' \| 'article' \| 'section' \| 'aside' \| 'header' \| 'footer' \| 'main' \| 'nav'`	`'div'`	The HTML element to render as
`className`	`string`	-	Additional CSS classes

LinkOverlay Props

Props

Prop	Type	Default	Description
`href`	`string`	-	The URL the link points to
`external`	`boolean`	`false`	Whether the link opens in a new tab
`className`	`string`	-	Additional CSS classes

Accessibility

Semantic HTML: LinkBox can render as semantic elements like article, section, etc.
Focus management: The LinkOverlay anchor receives focus for keyboard navigation
Nested interactivity: Use relative z-10 on nested links/buttons to keep them interactive
External links: Automatically adds rel="noopener noreferrer" for security
Click area: The entire card area is clickable, improving usability