IconLink

Use an IconLink when you need to provide an link in a compact space.

Figma LibraryView in StorybookView in PlayroomAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { IconLink } from '@adaptavant/eds-core';

Variants​

IconLink accepts all variants as <IconButton /> we recommend using only following 6 variants, accentPrimary is the default.

{/* accentPrimary */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  variant="accentPrimary"
/>

{/* neutralPrimary */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  variant="neutralPrimary"
/>

{/* accentSecondary */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  variant="accentSecondary"
/>

{/* neutralSecondary */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  variant="neutralSecondary"
/>

{/* neutralSecondaryIntense */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  variant="neutralSecondaryIntense"
/>

{/* neutralTertiary */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  variant="neutralTertiary"
/>
View in Playroom

Icons​

Customise the icon via the icon prop.

{/* CheckIcon */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={CheckIcon}
  variant="accentPrimary"
/>

{/* InformationIcon */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={InformationIcon}
  variant="accentSecondary"
/>
View in Playroom

Size​

Customise the size of the IconLink via the size prop.

{/* xLarge */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  size="xLarge"
/>

{/* large */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  size="large"
/>

{/* standard */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  size="standard"
/>

{/* small */}
<IconLink
  aria-label="Click me!"
  href="#"
  icon={NewIcon}
  size="small"
/>
View in Playroom

Adapting With Frameworks​

IconLink is polymorphic and can render as different components using the as prop. This is particularly useful when integrating with framework-specific link components, like React Router or Next.js.

When you pass a component to the as prop, IconLink will render as that component and accept all of its props, as well as the component's usual props.

Using React Router's Link component​

import { Link } from "react-router";

<IconLink
  // IconLink props
  aria-label="Go to Settings"
  icon={CheckIcon}
  variant="accentPrimary"
  as={Link}
  // React Router's Link props
  to="/settings"
/>

Using Next.js Link component​

import NextLink from 'next/link';

<IconLink
  // IconLink props
  aria-label="Go to Settings"
  icon={CheckIcon}
  variant="accentPrimary"
  as={NextLink}
  href="/settings"
  // Next Link props
  {...otherNextLinkProps} // Based on usage.
/>

This polymorphic behavior allows IconLink to maintain its styling and accessibility features while adapting to different routing systems or custom components.

Responsive Guidelines​

Icon links require larger tap targets on smaller viewports, where touch input is less precise than a pointer. Their compact footprint makes adequate sizing especially important. Adjust the size prop on tablet and mobile relative to its desktop value, following the default mapping below:

DesktopTabletMobile
smallstandardstandard
standardlargelarge or xLarge
largelargelarge or xLarge

Read the current breakpoint with useResponsiveLayout and set the size prop accordingly:

Resize the browser window to see the size adapt across breakpoints.

const { isDesktop } = useResponsiveLayout();
const size = isDesktop ? 'standard' : 'large';

return (
  <IconLink
    aria-label="Add"
    href="#"
    icon={NewIcon}
    size={size}
    variant="accentPrimary"
  />
);
View in Playroom

API Reference​

IconLink

PropDefaultDescription
variant?_'accentPrimary' | 'accentSecondary' | 'neutralPrimary' | 'neutralSecondary' | 'neutralSecondaryIntense' | 'neutralTertiary'
Variant of the IconLink.
size?_'standard' | 'small' | 'large' | 'xLarge'
Size of the Icon.
icon_Icon
Set the Icon.
href?_string
Specifies the URL of the page the link goes to
rel?_string
Specifies the relationship between the current document and the linked document/resource.
target?_'_self' | '_blank' | '_parent' | '_top'
Specifies where to open the linked document.
aria-label_string
Describes the component to assistive tech users and the action or effect that will take place when the link is clicked.