Skip to main content


Used to label and link to categorized content.


  1. Icon (optional)
  2. Tag


import { Tag } from '@pluralsight/react'


Basic Tag

Live Editor


There are 3 ways to customize the Tag component.

1. Unused Classes

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

  1. pando-tag: The element of the Tag.

2. Passing a className prop

You can pass a className prop to the Tag component to customize the Tag. 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 Tag.
import customStyles from './customStyles.module.css'

function CustomTag(props) {
return (
<Tag className={customStyles.tag} href="/">

3. Ejected Tag

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

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

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



Do use the Tag when you need to link to a category/content.

Don't use a Tag without a link to a category. Instead use a Badge.

Do use the Pando Icons within the Tag for visual interest.

Don't use emojis within the Tag.

Do use in moderation to prevent too much visual noise.

Don't exceed more than 3 rows of Tags within a page.



interface TagProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
size?: 's' | 'm'
  1. Any props that can be passed to an HTML anchor element.
  2. size - The size of the Tag. Defaults to m.

Size Mapping

Tag size rules.
s: 'For smaller/tighter experiences where the default size (m) cannot be supported.',
m: 'Should be used in most, if not all cases.'


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

  1. When using an Icon, the aria-hidden attribute is set to true on the Icon to prevent the screen reader from reading the Icon's name.