Tag

Import

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.

Shape Variants

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

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.

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.

Data Attributes

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

API

Props

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