Text Link

Used to navigate the user to a new page.

• View on Github
• View Core API
• View on Figma

Import

import { TextLink } from '@pluralsight/react'

Anatomy

1. Link
2. External Icon (optional)

Usage

Basic Links

Result

Loading...

Live Editor

function BasicTextLinks() { return ( <Grid cols="repeat(2, 1fr)" gap={8} data-site-override="alignGridCenter"> <GridItem> <TextLink href="/">Local Text Link</TextLink> </GridItem> <GridItem> <TextLink href="https://github.com/pluralsight/pando"> External Text Link </TextLink> </GridItem> </Grid> ) }

function BasicTextLinks() {
  return (
    <Grid cols="repeat(2, 1fr)" gap={8} data-site-override="alignGridCenter">
      <GridItem>
        <TextLink href="/">Local Text Link</TextLink>
      </GridItem>

      <GridItem>
        <TextLink href="https://github.com/pluralsight/pando">
          External Text Link
        </TextLink>
      </GridItem>
    </Grid>
  )
}

Customizing

There are 3 ways to customize the TextLink component.

1. Unused Classes

Each component layer of the TextLink has a unused class name that can be utilized in your local CSS to customize the TextLink at any level.

1. pando-text-link: The element of the TextLink.

2. Passing a className prop

You can pass a className prop to the TextLink component to customize the TextLink. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

Example of using CSS Modules to customize the TextLink.

import customStyles from './customStyles.module.css'

function CustomTextLink(props) {
  return <TextLink className={customStyles.link}>{props.children}</TextLink>
}

3. Ejected TextLink

For a low-level "ejected" approach, you can use the Headless-styles API to customize the TextLink however you prefer while keeping the accessibility behavior.

import { getTextLinkProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.

Behavior

Usage

Do use the Text Link when you need to provide a way to navigate to a different page.

Don't use a Button to navigate the user to a different page.

Do use the ExternalLink Icon when you have a link that will navigate the user outside of your application/site.

Don't eliminate the ExternalLink Icon unless the link uses a local path.

API

Parameters

type TextLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>

1. Any property that can be passed to an HTML <a> element.

Accessibility

The Pando TextLink, and Icon APIs combined with semantic HTML allow the TextLink to be fully accessible and screen-readable by default.

For external links, the target attribute is set to "_blank" and the rel attribute is set to "noopener noreferrer" to prevent tab-nabbing.