Tag

Examples

Size

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

small
medium
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.

With Icon
With Icon
With Icon
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.

With Click
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

As a Toggle

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.

Toggled on
Toggled off
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

Problem tag
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

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-tag
  • Import
    import Tag from '@pluralsight/ps-design-system-tag'
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