A styled anchor component with size variants, disabled state, and asChild support for polymorphic rendering.

Hyperlink wraps an <a> tag with design-token-driven styling. It supports three sizes, a disabled state via aria-disabled, and asChild for rendering any child element with hyperlink styles (e.g. a router <Link>).

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { Hyperlink } from '@infinitibit_gmbh/ui';

export function Example() {
  return <Hyperlink href="https://example.com">Visit example.com</Hyperlink>;
}

Sizes

Three sizes map to the body type scale.

Small hyperlink Medium hyperlink Large hyperlink

All sizes render semibold (600), matching the Figma label scale.

Size	Font size
`sm`	12px
`md`	14px (default)
`lg`	20px

Disabled

The disabled prop sets aria-disabled="true" and removes pointer interaction. Native disabled is not used because anchor elements don't support it.

Disabled hyperlink

asChild

Use asChild to render the child element instead of <a>, merging hyperlink styles and props onto it. This is useful for router-aware link components.

import Link from 'next/link';
import { Hyperlink } from '@infinitibit_gmbh/ui';

<Hyperlink asChild>
  <Link href="/dashboard">Dashboard</Link>
</Hyperlink>

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size variant
`disabled`	`boolean`	—	Mutes color, removes click, sets aria-disabled
`asChild`	`boolean`	—	Renders child element with hyperlink styles
`href`	`string`	—	Link destination (passed to `<a>`)
`children`	`ReactNode`	—	Link text or content

All other <a> props (target, rel, onClick, etc.) are forwarded.

Accessibility

Disabled links use aria-disabled="true" — they remain in the tab order and are announced by screen readers as unavailable.
Focus-visible ring uses the brand primary token for consistent, high-contrast focus indication.
Link contrast meets WCAG AA (primary-500 on white backgrounds).

Hyperlink