Link

Documentation

Contract

Overview

Machine-readable contract from Component Spec.

component: linkexport: Linkversion: 1attributes: data-refineui=link

Anatomy

Part	data-refineui
root	link

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir, prefers-contrast

Keyboard

Key	Action	Native
Enter	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Documentation

Recipe → Tokens

Slot bindings for variant="default" — declared in Link/style → tokens.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
root	—	default	link.default	foregroundLink	blue700	blue400	text-refineui-alias-foreground-link
root	—	hover	link.hover	foregroundLinkHover	blue800	blue300	text-refineui-alias-foreground-link-hover
root	—	active	link.active	foregroundLinkActive	blue900	blue200	text-refineui-alias-foreground-link-active
root	—	visited	link.visited	foregroundLinkVisited	blue500	blue100	text-refineui-alias-foreground-link-visited
root	—	disabled	link.disabled	foregroundDisabled	neutral400	neutral600	text-refineui-alias-foreground-disabled
root	—	subtle.default	link.subtle.default	foregroundSecondary	neutral600	neutral350	text-refineui-alias-foreground-secondary
root	—	subtle.hover	link.subtle.hover	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary
root	—	subtle.active	link.subtle.active	foregroundBrandStrong	neutralBlack	primaryLightGray	text-refineui-alias-foreground-brand-strong

Component token trace

All paths in token-trace-v2.json prefixed with link.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
link.active	foregroundLinkActive	blue900	blue200	#1D44CE	#C3D0FF
link.default	foregroundLink	blue700	blue400	#3E68FF	#90A8FF
link.disabled	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
link.hover	foregroundLinkHover	blue800	blue300	#2351F7	#A9BCFF
link.subtle.active	foregroundBrandStrong	neutralBlack	primaryLightGray	#000000	#E6E6E6
link.subtle.default	foregroundSecondary	neutral600	neutral350	#6C6C6C	#D8D8D8
link.subtle.hover	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
link.visited	foregroundLinkVisited	blue500	blue100	#7694FF	#DEE5FF

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Link } from "@refineui/react";

<Link href="/docs">Documentation</Link>

<Link href="https://example.com" target="_blank">
  External Link
</Link>

<Link href="https://example.com" showExternalIcon={false}>
  No Icon
</Link>

<Link href="/disabled" disabled>
  Disabled Link
</Link>

API Reference

Prop	Default	Type	Description
showExternalIcon	—	boolean	When true, shows external-link icon. Shown automatically for `target="_blank"`. Set false to hide.
disabled	false	boolean	Disables link (sets `aria-disabled` and blocks pointer events).
href	—	string	Link destination URL.