Hover Link

Loading code…

Installation

Loading code…

Usage

import { HoverLink } from '@/components/sora-ui/texts/hover-link';

export function Example() {
  return <HoverLink href="/catalog">Hover me</HoverLink>;
}

Underline wipes

underline-left, underline-right, and underline-center draw a 1px rule in from that origin on hover.

<HoverLink href="/docs" variant="underline-left">Underline left</HoverLink>
<HoverLink href="/docs" variant="underline-right">Underline right</HoverLink>
<HoverLink href="/docs" variant="underline-center">Underline center</HoverLink>

Block highlights

highlight-rise grows a white block up from the baseline; highlight-wipe wipes it across from the left. Both use mix-blend-difference, so the copy inverts as the block passes over it — no color props needed.

<HoverLink href="/docs" variant="highlight-rise">Highlight rise</HoverLink>
<HoverLink href="/docs" variant="highlight-wipe">Highlight wipe</HoverLink>

Without the arrow

The arrow is on by default. Set withArrow={false} for plain copy links.

<HoverLink href="/docs" variant="underline-center" withArrow={false}>
  Plain link
</HoverLink>

Props

When to Use

Use it for inline editorial links, footer or nav lists, and call-to-action rows where a hover state should feel deliberate without extra JavaScript. All five presets are pure CSS transitions.

Avoid it for multi-line paragraph links: the underline spans the whole anchor box, so a wrapped link looks like a block rather than per-line underlines.

Accessibility

Renders a standard <a> with the arrow marked aria-hidden. Focus is handled with focus-visible ring tokens, so keyboard users see the same affordance as hover. When target="_blank" is set, rel="noopener noreferrer" is added automatically unless you pass your own. Under prefers-reduced-motion: reduce the transitions are dropped and the hover state appears instantly.

Credits

Inspired by Skiper UI. Reimplemented for CSS transitions.