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 Playroom

Quick Start

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

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​

PropTypeDescriptionDefault
as?React.ElementTypeHTML element or component to render'a'
childrenReact.ReactNodeThe content of the component._
href?stringThe URL to link to. See MDN for more information._
relstringThe relationship between the current document and the linked document. See MDN for more information._
target_self | _blank | _parent | _topWhere to display the linked document. See MDN for more information._self
variant?'accentPrimary' | 'neutralPrimary' | 'neutralSecondary' | 'regular'The variant of the TextLink.accentPrimary

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.