Actions

Link

A styled link for navigation.

React Aria SourceView as Markdown Edit on GitHub

Link navigates to another URL or route. Use Button for an action such as saving, submitting, or opening a dialog.

Link: Basic

import { Link } from '@luke-ui/react/link';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Text>
			Open the <Link href="#example-destination">example destination</Link>.
		</Text>
	);
};

Link: Basic

Loading Link: Basic example

Appearance

text is the default. Text Links use the theme's label weight, 500 by default, to stand out from the surrounding text. Use them only inline within text that has a lighter weight, such as body text. Set appearance="button" when the destination needs a button-shaped call to action. A button-shaped Link remains a link and keeps its native navigation behaviour.

Link: Appearance

Open in playground

TextOpen the example destination.

ButtonExample destination

import { Link } from '@luke-ui/react/link';
import { Text } from '@luke-ui/react/text';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Comparison>
			<ComparisonItem label="Text">
				<Text>
					Open the <Link href="#example-destination">example destination</Link>.
				</Text>
			</ComparisonItem>
			<ComparisonItem label="Button">
				<Link appearance="button" href="#example-destination">
					Example destination
				</Link>
			</ComparisonItem>
		</Comparison>
	);
};

Link: Appearance

Loading Link: Appearance example

Prominence

standard is the default. Choose low for a secondary destination. Text Links have low and standard prominence only, because high would look the same as standard. Text Links use the accent text colour at both, so prominence changes the underline and not the hue. Hover and press toggle the underline. Low text Links have no underline at rest and gain one, and standard text Links are underlined at rest and lose it. Keyboard focus shows the focus ring, and low text Links also underline. Press also shifts the text colour. On a solid background, both take the background's readable text colour.

Button-shaped Links keep high, which uses the theme's primary accent treatment.

Link: Prominence

Open in playground

LowOpen the example destination.

StandardOpen the example destination.

import { Link } from '@luke-ui/react/link';
import { Text } from '@luke-ui/react/text';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Comparison>
			<ComparisonItem label="Low">
				<Text>
					Open the{' '}
					<Link href="#example-destination" prominence="low">
						example destination
					</Link>
					.
				</Text>
			</ComparisonItem>
			<ComparisonItem label="Standard">
				<Text>
					Open the <Link href="#example-destination">example destination</Link>.
				</Text>
			</ComparisonItem>
		</Comparison>
	);
};

Link: Prominence

Loading Link: Prominence example

Presentation reference

Link: Presentation reference

Open in playground

Text

LowOpen the example destination.

StandardOpen the example destination.

Button

LowExample destination

StandardExample destination

HighExample destination

import { Link } from '@luke-ui/react/link';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Stack gap="space.24">
			<Stack gap="space.8">
				<Text typography="label">Text</Text>
				<Comparison>
					<ComparisonItem label="Low">
						<Text>
							Open the{' '}
							<Link href="#example-destination" prominence="low">
								example destination
							</Link>
							.
						</Text>
					</ComparisonItem>
					<ComparisonItem label="Standard">
						<Text>
							Open the <Link href="#example-destination">example destination</Link>.
						</Text>
					</ComparisonItem>
				</Comparison>
			</Stack>
			<Stack gap="space.8">
				<Text typography="label">Button</Text>
				<Comparison>
					<ComparisonItem label="Low">
						<Link appearance="button" href="#example-destination" prominence="low">
							Example destination
						</Link>
					</ComparisonItem>
					<ComparisonItem label="Standard">
						<Link appearance="button" href="#example-destination">
							Example destination
						</Link>
					</ComparisonItem>
					<ComparisonItem label="High">
						<Link appearance="button" href="#example-destination" prominence="high">
							Example destination
						</Link>
					</ComparisonItem>
				</Comparison>
			</Stack>
		</Stack>
	);
};

Link: Presentation reference

Loading Link: Presentation reference example

Disabled

Set isDisabled only when a destination is temporarily unavailable. Disabled links cannot receive focus or respond to activation. Explain why nearby when someone needs that information.

Link: Disabled

Open in playground

Open the example destination.

import { Link } from '@luke-ui/react/link';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Text>
			Open the{' '}
			<Link href="#example-destination" isDisabled>
				example destination
			</Link>
			.
		</Text>
	);
};

Link: Disabled

Loading Link: Disabled example

Accessibility

Write link text that names the destination and makes sense outside its surrounding sentence. Avoid generic labels such as “Click here”.

API

LinkProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
appearance	"button" \|⁠ "text"	`text`
Sets whether the control uses button or text-link styling.
download	boolean \|⁠ string	—
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
endContent	ReactNode	—
href*	NonNullable<RacLinkProps['href']>	—
URL the Link points to.
hrefLang	string	—
Hints at the human language of the linked URL. SeeMDN.
inlineSize	'auto' \|⁠ 'full'	`auto`
Use `full` to fill the available inline size.
ping	string	—
A space-separated list of URLs to ping when the link is followed. See MDN.
prominence		`standard`
Controls the strength of the control's visual treatment, from low to standard. Controls the strength of the control's visual treatment, from low to high.
referrerPolicy	HTMLAttributeReferrerPolicy	—
How much of the referrer to send when following the link. See MDN.
rel	string	—
The relationship between the linked resource and the current page. See MDN.
size	'small' \|⁠ 'medium'	`medium`
Sets the size of the control.
startContent	ReactNode	—
target	HTMLAttributeAnchorTarget	—
The target window for the link. See MDN.