TextLink

TextLink allow users to navigate to a different location. They can be presented inline inside a paragraph or as standalone text.

Figma LibraryView in StorybookView in PlayroomAPI Reference

Quick Start

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

Basic Usage​

Click me!
<TextLink>Click me!</TextLink>
View in Playroom

Variant​

To adjust the appearance of TextLink, use the variant prop. "accentPrimary" is the default.

The variant prop applies color, text-transform, and focus styles. All other typographic styles are inherited from the surrounding Text component.

LabelLabelLabelLabel
{/* accentPrimary */}
<Text className="text-body-16">
  <TextLink variant="accentPrimary" href="#">Label</TextLink>
</Text>

{/* neutralPrimary */}
<Text className="text-body-16">
  <TextLink variant="neutralPrimary" href="#">Label</TextLink>
</Text>

{/* neutralSecondary */}
<Text className="text-body-16">
  <TextLink variant="neutralSecondary" href="#">Label</TextLink>
</Text>

{/* regular */}
<Text className="text-body-16">
  <TextLink variant="regular" href="#">Label</TextLink>
</Text>
View in Playroom

Adapting With Frameworks​

TextLink 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, TextLink 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";

<TextLink as={Link} to="/settings">
    Settings
</TextLink>

Using Next.js Link component​

import NextLink from 'next/link';

<TextLink as={NextLink} href="/settings">
    Settings
</TextLink>

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

API Reference​

TextLink

PropDefaultDescription
as?'a'React.ElementType
HTML element or component to render
children_React.ReactNode
The content of the component.
href?_string
The URL to link to. See MDN for more information.
rel_string
The relationship between the current document and the linked document. See MDN for more information.
target_self'_self' | '_blank' | '_parent' | '_top'
Where to display the linked document. See MDN for more information.
variant?accentPrimary'accentPrimary' | 'neutralPrimary' | 'neutralSecondary' | 'regular'
The variant of the TextLink.