Tag

Used for categorizing or labeling content

import { Tag } from '@cerberus/react'

Usage

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

Usage Variants

Use the usage prop to change the style of the tag.

options: filled,outlined

Shape Variants

Use the shape prop to change the shape of the tag.

options: pill,square

Colors

You can set the color of the tag by using the palette prop.

Note

By nature of CSS rules, only a `palette` or `gradient` can be used at a time. This is because the `palette` prop sets the background color, and the `gradient` prop sets the background gradient.

options: page,info,success,warning,danger,secondaryAction

Gradients

You can set the gradient of the tag by using the gradient prop.

Note

By nature of CSS rules, only a `palette` or `gradient` can be used at a time. This is because the `palette` prop sets the background color, and the `gradient` prop sets the background gradient.

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.

Customizing

You can customize the Tag using style props and data selectors on any slot primitve.

Primitives

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

Component	Description
TagRoot	The root wrapper of the tag.

Data Attributes

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

Name	Value	Description
`data-scope`	`tag`	The scope of the components.
`data-part`	`root`	The root wrapper of the tag.
`data-palette`	palette name	The color palette of the tag.

API

Props

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

Name	Default	Description
gradient	`undefined`	The gradient of the tag (overrides palette).
palette	`page`	The color palette of the tag (overrides gradient).
usage	`filled`	The style treatment of the tag.
shape	`pill`	The shape of the tag.
onClick	`undefined`	How to create a Closable tag.

On this page

Loading...

Loading...

Loading...

Loading...

FilledStart iconEnd icon

import { HStack } from '@/styled-system/jsx'
import { Information } from '@carbon/icons-react'
import { Tag } from '@cerberus/react'

export function BasicDemo() {
  return (
    <HStack gap="md">
      <Tag>Filled</Tag>
      <Tag>
        <Information />
        Start icon
      </Tag>
      <Tag>
        End icon
        <Information />
      </Tag>
    </HStack>
  )
}

ClosableClosableClosable

'use client'

import { HStack } from '@/styled-system/jsx'
import { Tag } from '@cerberus/react'

export function ClosableDemo() {
  const handleClick = () => {
    console.log('Clicked!')
  }

  return (
    <HStack gap="md">
      <Tag onClick={handleClick}>Closable</Tag>

      <Tag palette="info" onClick={handleClick}>
        Closable
      </Tag>

      <Tag palette="danger" onClick={handleClick}>
        Closable
      </Tag>
    </HStack>
  )
}

Cerberus Forever

import { Tag } from '@cerberus/react'

export function CustomDemo() {
  return (
    <Tag colorPalette="danger" p="2" rounded="0!" transform="skew(-10deg)">
      Cerberus Forever
    </Tag>
  )
}

pillsquare

import { HStack } from '@/styled-system/jsx'
import { For, Tag } from '@cerberus/react'
import { tagShapes } from './data'

export function ShapeDemo() {
  return (
    <HStack gap="md">
      <For each={tagShapes}>
        {(shape) => (
          <Tag key={shape} shape={shape}>
            {shape}
          </Tag>
        )}
      </For>
    </HStack>
  )
}

filledoutlined

import { HStack } from '@/styled-system/jsx'
import { For, Tag } from '@cerberus/react'
import { tagUsages } from './data'

export function UsageDemo() {
  return (
    <HStack gap="md">
      <For each={tagUsages}>
        {(usage) => (
          <Tag key={usage} usage={usage}>
            {usage}
          </Tag>
        )}
      </For>
    </HStack>
  )
}

import { Grid, GridItem } from '@/styled-system/jsx'
import { Information } from '@carbon/icons-react'
import { Tag, Text } from '@cerberus/react'
import { Fragment } from 'react'
import { tagGradients, variants } from './data'

const GRAD_LIST = tagGradients.map((gradient) => ({ gradient, variants }))

export function GradientDemo() {
  return (
    <Grid columns={5} gap="md" px="lg" w="full">
      {GRAD_LIST.map(({ gradient, variants }) => (
        <Fragment key={`${gradient}`}>
          <Text as="small">{gradient}:</Text>
          {variants.map(({ usage, shape }, idx) => (
            <GridItem key={`${gradient}-${idx}`} colSpan={1}>
              <Tag gradient={gradient} usage={usage} shape={shape}>
                <Information />
                Label
              </Tag>
            </GridItem>
          ))}
        </Fragment>
      ))}
    </Grid>
  )
}

import { Grid, GridItem } from '@/styled-system/jsx'
import { Information } from '@carbon/icons-react'
import { Tag, Text } from '@cerberus/react'
import { Fragment } from 'react'
import { tagPalettes, variants } from './data'

const COLOR_LIST = tagPalettes.map((palette) => ({ palette, variants }))

export function PaletteDemo() {
  return (
    <Grid columns={5} gap="md" px="lg" w="full">
      {COLOR_LIST.map(({ palette, variants }) => (
        <Fragment key={`${palette}`}>
          <Text as="small">{palette}:</Text>
          {variants.map(({ usage, shape }) => (
            <GridItem key={`${palette}:${usage}:${shape}`} colSpan={1}>
              <Tag palette={palette} usage={usage} shape={shape}>
                <Information />
                Label
              </Tag>
            </GridItem>
          ))}
        </Fragment>
      ))}
    </Grid>
  )
}