Skip to main content

Tag

Used to label and link to categorized content.

Anatomy

  1. Icon (optional)
  2. Tag

Import

import { Tag } from '@pluralsight/react'

Usage

Basic Tag

// import { PlaceholderIcon } from '@pluralsight/icons'

function BasicTags() {
  return (
    <Grid cols="repeat(3, 1fr)" gap={8} data-site-override="alignGridCenter">
      <GridItem>
        <Tag href="#" size="s">
          small
        </Tag>
      </GridItem>

      <GridItem>
        <Tag href="#">default</Tag>
      </GridItem>

      <GridItem>
        <Tag href="#" icon={PlaceholderIcon}>
          With Icon
        </Tag>
      </GridItem>
    </Grid>
  )
}

Customizing

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.

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

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

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.

Behavior

Usage

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.

API

Parameters

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

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

Accessibility

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.