Skip to main content

Text Link

Used to navigate the user to a new page.


import { TextLink } from '@pluralsight/react'


  1. Link
  2. External Icon (optional)


Live Editor


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={}>{props.children}</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.



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.



type TextLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
  1. Any property that can be passed to an HTML <a> element.


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.