Tag

Tags allow users to categorize content. They can represent keywords or people.

Install
npm install @pluralsight/ps-design-system-tag
Import
import Tag from '@pluralsight/ps-design-system-tag'

Examples

Size

Tags come in two sizes. Try to use the default size, medium, whenever possible.

import Tag from '@pluralsight/ps-design-system-tag'
import React from 'react'

const Example: React.FC = props => {
  return (
    <div className="example-grid--col-2">
      <Tag size={Tag.sizes.small}>small</Tag>
      <Tag size={Tag.sizes.medium}>medium</Tag>
    </div>
  )
}

export default Example

Icon

A tag may contain an icon, consistently placed on the right. An icon may also receive on onClick prop in this position.

import { CloseIcon } from '@pluralsight/ps-design-system-icon'
import Tag from '@pluralsight/ps-design-system-tag'
import React from 'react'

const Example: React.FC = props => {
  return (
    <div className="example-grid--col-3">
      <Tag icon={<CloseIcon />}>With Icon</Tag>

      <Tag icon={<CloseIcon />} size={Tag.sizes.small}>
        With Icon
      </Tag>

      <Tag
        icon={<CloseIcon onClick={_ => alert('icon clicked')} />}
        size={Tag.sizes.small}
      >
        With Icon
      </Tag>
    </div>
  )
}

export default Example

Hover state

A tag may made actionable by adding an onClick or href. If it's actionable, a standard hover state is present.

import Tag from '@pluralsight/ps-design-system-tag'
import React from 'react'

const Example: React.FC = props => {
  return (
    <div className="example-grid--col-2">
      <Tag onClick={_ => alert('click')}>With Click</Tag>
      <Tag href="https://duckduckgo.com">With Link</Tag>
    </div>
  )
}

export default Example

A tag is sometimes used as a toggle. The toggled-on state is trigged with the isPressed prop. It will handle styling and accessibility concerns. Controlling applications are in charge of storing toggled state.

import Tag from '@pluralsight/ps-design-system-tag'
import React from 'react'

const Example: React.FC = props => {
  return (
    <div className="example-grid--col-2">
      <Tag isPressed>Toggled on</Tag>
      <Tag>Toggled off</Tag>
    </div>
  )
}

export default Example

Error

Error states are engaged with the error flag. This is useful when tags are used from within a form

import Tag from '@pluralsight/ps-design-system-tag'
import React from 'react'

const Example: React.FC = props => {
  return <Tag error>Problem tag</Tag>
}

export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

Props

Name	Type	Description	Default
`error`	`boolean`	error state flag	`false`
`icon`	`*Icon`	Icon component, right-aligned
`isPressed`	`boolean`	for accessibility of tags used as toggles	`false`
`size`	`small \| medium`	tag size (from Tag.sizes)	`medium`