IconLink

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

Figma LibraryView in StorybookView in Playroom

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.

{/* 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.

API Reference​

IconLink

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.