Actions

Icon Link

An icon-only control for navigation.

React Aria SourceView as Markdown Edit on GitHub

IconLink navigates to another URL or route, shown as a compact icon-only control. Use Link when the destination needs visible text. Use IconButton for an action such as saving or deleting instead of a navigation.

Icon Link: Basic

Open in playground

import { IconLink } from '@luke-ui/react/icon-link';

export default () => {
	return <IconLink aria-label="Search" href="/docs/installation" icon="search" />;
};

Icon Link: Basic

Loading Icon Link: Basic example

Size

medium is the default. Use small for compact toolbars and dense row actions. Keep controls in a group at the same size.

Icon Link: Size

Open in playground

small

medium

import { IconLink } from '@luke-ui/react/icon-link';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Comparison>
			<ComparisonItem label="small">
				<IconLink aria-label="Search" href="/docs/installation" icon="search" size="small" />
			</ComparisonItem>
			<ComparisonItem label="medium">
				<IconLink aria-label="Search" href="/docs/installation" icon="search" size="medium" />
			</ComparisonItem>
		</Comparison>
	);
};

Icon Link: Size

Loading Icon Link: Size example

Prominence

standard is the default. Choose low for quiet secondary destinations and high for a primary destination. High prominence uses the theme’s primary accent treatment.

Icon Link: Prominence

Open in playground

Low

Standard

High

import { IconLink } from '@luke-ui/react/icon-link';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Comparison>
			<ComparisonItem label="Low">
				<IconLink
					aria-label="Installation documentation"
					href="/docs/installation"
					icon="bookOpen"
					prominence="low"
				/>
			</ComparisonItem>
			<ComparisonItem label="Standard">
				<IconLink
					aria-label="Installation documentation"
					href="/docs/installation"
					icon="bookOpen"
				/>
			</ComparisonItem>
			<ComparisonItem label="High">
				<IconLink
					aria-label="Installation documentation"
					href="/docs/installation"
					icon="bookOpen"
					prominence="high"
				/>
			</ComparisonItem>
		</Comparison>
	);
};

Icon Link: Prominence

Loading Icon Link: Prominence example

Custom icons

Pass a decorative, non-interactive ReactElement to icon for a graphic outside the generated icon set, such as a brand mark. IconLink sizes the graphic to match its built-in icons.

Icon Link: Custom icon

Open in playground

import { createIcon } from '@luke-ui/react/icon';
import { IconLink } from '@luke-ui/react/icon-link';

export default () => {
	return (
		<IconLink
			aria-label="Luke UI on GitHub"
			href="https://github.com/lukebennett88/luke-ui"
			icon={<GithubIcon />}
			target="_blank"
		/>
	);
};

const GithubIcon = createIcon({
	path: (
		<path d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z" />
	),
});

Icon Link: Custom icon

Loading Icon Link: Custom icon example

Disabled

Set isDisabled when the destination is temporarily unavailable. Disabled controls cannot receive focus or respond to presses.

Icon Link: Disabled

Open in playground

import { IconLink } from '@luke-ui/react/icon-link';

export default () => {
	return <IconLink aria-label="Search" href="/docs/installation" icon="search" isDisabled />;
};

Icon Link: Disabled

Loading Icon Link: Disabled example

Accessibility

Provide aria-label or aria-labelledby for every icon link. Name the destination, not the icon. The icon itself, whether a built-in Icon or a custom graphic, contributes no accessible name, so the naming prop is required.

API

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

Name	Type	Default
download	boolean \|⁠ string	—
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
href*	NonNullable<RacLinkProps['href']>	—
URL the IconLink points to.
hrefLang	string	—
Hints at the human language of the linked URL. SeeMDN.
icon*	\|⁠ ReactElement	—
Icon name from the generated icon set, or a custom icon element such as a brand mark.
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 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.
target	HTMLAttributeAnchorTarget	—
The target window for the link. See MDN.