Skip to content
Yuzur1ha Open

Component referenceDraft

Link

Links preserve native navigation semantics, including opening another tab and copying the destination.

Updated

Design notes

Link.Container owns navigation and hover activation; Link.Underline decorates only the selected text. Primary and secondary appearances reuse button styling without press scaling.

Playground

Playgrounddemo.tsx
Small linkRead the guideExplore documentation
Get startedBack to overview
COMPOSED LINK

Account settings

Hover anywhere on this card to underline only its title.

content/components/link/demo.tsx

import { Link } from "@yuzur1ha/ui"
export function LinkDemo() {
  return (
    <>
      <div className="demo-row">
        <Link href="#link-destination" size="small">
          Small link
        </Link>
        <Link href="#link-destination">Read the guide</Link>
        <Link href="#link-destination" size="large">
          Explore documentation
        </Link>
      </div>
      <div className="demo-row">
        <Link href="#link-destination" appearance="primary" size="large">
          Get started
        </Link>
        <Link
          href="#link-destination"
          appearance="secondary"
          size="small"
          showIcon={false}
        >
          Back to overview
        </Link>
      </div>
      <Link.Container
        href="#link-destination"
        className="demo-link-card"
        size="large"
      >
        <span className="demo-label">COMPOSED LINK</span>
        <h2>
          <Link.Underline>Account settings</Link.Underline>
        </h2>
        <p>Hover anywhere on this card to underline only its title.</p>
      </Link.Container>
      <p id="link-destination" tabIndex={-1}>
        Link destination. Navigation uses a native anchor; the icon stays at the
        upper right of its content.
      </p>
    </>
  )
}

API

Link

A styled anchor with optional corner arrow and hover line. Primary and secondary appearances reuse button styles without press scaling. Native anchor attributes are forwarded.

LinkProps
PropertyTypeRequiredDefaultDescription
hrefstringYes—Navigation destination.
sizeComponentSizeNo"medium"Visual size: small, medium or large.
appearance"text" | "primary" | "secondary"No"text"Text link or button-styled primary/secondary anchor, without press scaling.
showIconbooleanNotrueShow a decorative arrow at the upper-right edge of the link text.
underlinebooleanNotrueEnables the animated underline on hover or keyboard focus. The anchor never has a persistent underline.
targetHTMLAttributeAnchorTargetNo—Browsing context for the linked destination, such as _self or _blank.
relstringNo—Link relationship tokens. New-window links also receive noopener noreferrer.
childrenReactNodeNo—Content rendered inside the component.
onClickMouseEventHandler<HTMLAnchorElement>No—Native activation handler.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLAnchorElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

Link.Container

A semantic anchor that provides hover, focus and size context without button appearance. Compose Link.Underline inside it.

LinkContainerProps
PropertyTypeRequiredDefaultDescription
hrefstringYes—Navigation destination.
sizeComponentSizeNo"medium"Size context used by nested Link.Underline elements; adds no button appearance.
targetHTMLAttributeAnchorTargetNo—Browsing context for the linked destination, such as _self or _blank.
relstringNo—Link relationship tokens. New-window links also receive noopener noreferrer.
childrenReactNodeNo—Content rendered inside the component.
onClickMouseEventHandler<HTMLAnchorElement>No—Native activation handler.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLAnchorElement>No—Ref to the component’s documented DOM element.
underlinebooleanNotrueEnables the animated underline on hover or keyboard focus. The anchor never has a persistent underline.

No custom imperative methods. Event callbacks are listed as properties.

Link.Underline

A span drawing a straight underline when its Link.Container is hovered or focus-visible. Small and medium sizes use the same line thickness.

LinkUnderlineProps
PropertyTypeRequiredDefaultDescription
sizeComponentSizeNoInherits Link.ContainerOverride the container’s size for this underline. Small and medium use equal line thickness.
childrenReactNodeNo—Content rendered inside the component.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLSpanElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.