Tag

import { Tag } from '@cerberus/react'

Basic Usage

You can mix and match all of the examples to create the tag style of your choosing.

Usage Variants

Tags come in two usage variants: outlined and filled.

Shape Variants

Tags come in two shape variants: square and pill.

Colors

You can set the color of the tag by using the palette prop. By nature of CSS rules, only one of palette or gradient can be used at a time.

Gradients

You can set the gradient of the tag by using the gradient prop. By nature of CSS rules, only one of palette or gradient can be used at a time.

Closable

To use a closable tag, just pass an onClick prop to the Tag component. This will create a pill-shaped tag with a close icon button.

Primitives

You can customize the tag by utilizing style props and primitives. A Closable Tag is just a Tag with an IconButton inside.

Data Attributes

The Primitives additionally use the following data attributes for custom styling:

Dynamic Tags

Sometimes you may want to create Tags based on dynamic variables. In order to do this in a reliable way, we recommend using the Interface pattern.

import { Tag, type TagProps } from '@cerberus/react'

/**
 * This interface returns palette-based tags in a reliable way that PandaCSS
 * can statically analyze.
*/
export function MatchPaletteTag(props: TagProps) {
  switch (props.palette) {
    case 'page':
      return <Tag palette="page" {...props} />
    case 'secondaryAction':
      return <Tag palette="secondaryAction" {...props} />
    case 'info':
      return <Tag palette="info" {...props} />
    case 'success':
      return <Tag palette="success" {...props} />
    case 'warning':
      return <Tag palette="warning" {...props} />
    case 'danger':
      return <Tag palette="danger" {...props} />

    default:
      throw new Error(`Unsupported palette: ${props.palette}`)
  }
}

API

Props

The Tag component is an abstraction of the primitives and accepts the following props: