TextLink

Inline, underlined text hyperlink. Renders as an anchor (<a>) by default, or as a Next.js Link via the as prop.

When to use

Use TextLink for links inside body text (an underlined word/phrase in a paragraph). For a standalone button-styled action or navigation control, use Button.

TextLink is not a form field — there is no @uxf/form twin.

Usage

import { TextLink } from "@uxf/ui/text-link";

<p>
    Continue <TextLink href="/terms">via this link</TextLink>.
</p>;

// client-side navigation via Next.js Link
import Link from "next/link";
<TextLink as={Link} href="/dashboard">
    Dashboard
</TextLink>;

// as an action
<TextLink onClick={handleClick}>this link</TextLink>;

Props

Extends AnchorHTMLAttributes<HTMLAnchorElement> (minus type) and UseAnchorProps, so all standard <a> attributes (href, target, rel, download, onClick, className, children, …) are accepted.

Prop	Type	Default	Description
`variant`	`TextLinkVariant`	`"default"`	Visual style (see Variants & states).
`as`	`"a" \| NextLink`	`"a"`	Element to render. Pass Next.js `Link` for client-side navigation.
`isDisabled`	`boolean`	`false`	Non-interactive state (blocks pointer events).
`isLoading`	`boolean`	`false`	Busy state (sets `aria-busy`).
`type`	`"submit"`	—	Submits the closest `<form>` on activation. Only accepted `type`.
`analyticsCallback`	`() => void`	—	Called when the link is activated.

Behaviour comes from useAnchorProps: when href and target="_blank" are set, rel="noopener noreferrer" is added automatically; when there is an onClick (and no href), the anchor gets role="button" and keyboard activation.

Variants & states

Variant	Description
`default`	Brand-colored link.
`text`	Neutral text-colored link (high/low emphasis).

TextLinkVariants is an open interface; a project can add its own values via module augmentation (matching CSS required):

// text-link.d.ts
declare module "@uxf/ui/text-link/theme" {
    interface TextLinkVariants {
        muted: true;
    }
}

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/text-link.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Default

Open in new tab

Usage

import { TextLink } from "@uxf/ui/text-link"; <p> Continue <TextLink href="/terms">via this link</TextLink>. </p>; // client-side navigation via Next.js Link import Link from "next/link"; <TextLink as={Link} href="/dashboard"> Dashboard </TextLink>; // as an action <TextLink onClick={handleClick}>this link</TextLink>;

Props

Prop

Type

Default

Description

variant

TextLinkVariant

"default"

Visual style (see Variants & states).

as

"a" | NextLink

"a"

Element to render. Pass Next.js Link for client-side navigation.

isDisabled

boolean

false

Non-interactive state (blocks pointer events).

isLoading

boolean

false

Busy state (sets aria-busy).

type

"submit"

—

Submits the closest <form> on activation. Only accepted type.

analyticsCallback

() => void

—

Called when the link is activated.

Variants & states

Variant

Description

default

Brand-colored link.

text

Neutral text-colored link (high/low emphasis).

TextLinkVariants is an open interface; a project can add its own values via module augmentation (matching CSS required):

// text-link.d.ts declare module "@uxf/ui/text-link/theme" { interface TextLinkVariants { muted: true; } }