PixelTextLink

Inline anchor or button styled as a tone-coloured underlined link for prose, callouts, and CTAs.

Polymorphic: an <a> with href, a <button> without (in Angular, a[pxlTextLink] or button[pxlTextLink])
Seven brand tones (cyan default) with consistent focus ring and hover behaviour
Surface-aware typography (pixel vs linear)
Takes native anchor/button attributes and listeners (target, rel, aria-*, click, etc.)
SSR-safe and tree-shakable; zero runtime state

Status: stable
Category: data
Since: v1.0.0

API

import { PixelTextLink } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`	—	Link content.
`tone`	`'green' \| 'cyan' \| 'gold' \| 'red' \| 'purple' \| 'pink' \| 'neutral'`	`'cyan'`	Tone tint. Defaults to `'cyan'`.
`className`	`string`	—	Extra class names.
`surface`	`'pixel' \| 'linear'`	—	Visual surface override.
`href`	`string \| undefined`	—	Link target; without one the link is a button.

Also takes the native attributes and event handlers of <a> (AnchorHTMLAttributes<HTMLAnchorElement>).

Also takes the native attributes and event handlers of <button> (ButtonHTMLAttributes<HTMLButtonElement>).

WCAG target: 2.1 AA

link
button

Visible focus ring via focus-visible:ring-2; renders semantic <a> when href is provided and <button type="button"> otherwise so assistive tech announces the correct role. Pair external links with target/rel and consider adding a visible affordance for "opens in new tab".

Keyboard

Key	Action	When
`Enter`	Activates the link or button	—
`Space`	Activates the control when rendered as a button	href is omitted
`Tab`	Moves focus to the link	—

Usage

import { PixelTextLink } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelTextLink href="https://pxlkit.xyz">Read the docs</PixelTextLink>;
}

Examples

Default

import { PixelTextLink } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelTextLink href="https://pxlkit.xyz">Read the docs</PixelTextLink>;
}

Tones

import { PixelTextLink } from '@pxlkit/ui-kit';

export function Tones() {
  return (
    <div className="flex flex-wrap gap-4">
      <PixelTextLink href="#" tone="cyan">Cyan link</PixelTextLink>
      <PixelTextLink href="#" tone="green">Green link</PixelTextLink>
      <PixelTextLink href="#" tone="gold">Gold link</PixelTextLink>
      <PixelTextLink href="#" tone="red">Red link</PixelTextLink>
      <PixelTextLink href="#" tone="purple">Purple link</PixelTextLink>
      <PixelTextLink href="#" tone="pink">Pink link</PixelTextLink>
      <PixelTextLink href="#" tone="neutral">Neutral link</PixelTextLink>
    </div>
  );
}

As button

import { PixelTextLink } from '@pxlkit/ui-kit';

export function AsButton() {
  return (
    <PixelTextLink tone="cyan" onClick={() => console.log('clicked')}>
      Trigger an action
    </PixelTextLink>
  );
}

Surfaces

import { PixelTextLink } from '@pxlkit/ui-kit';

export function Surfaces() {
  return (
    <div className="flex flex-col gap-3">
      <PixelTextLink href="#" surface="pixel">Pixel surface</PixelTextLink>
      <PixelTextLink href="#" surface="linear">Linear surface</PixelTextLink>
    </div>
  );
}

External link

import { PixelTextLink } from '@pxlkit/ui-kit';

export function ExternalLink() {
  return (
    <PixelTextLink
      href="https://pxlkit.xyz"
      target="_blank"
      rel="noopener noreferrer"
    >
      Open in new tab
    </PixelTextLink>
  );
}

Inline in prose

import { PixelTextLink } from '@pxlkit/ui-kit';

export function InlineInProse() {
  return (
    <p className="max-w-md">
      Built with{' '}
      <PixelTextLink href="https://pxlkit.xyz" tone="green">
        pxlkit
      </PixelTextLink>
      , a tone-coloured component library for retro interfaces.
    </p>
  );
}

Related