Get Started
Components
Styling
Theming

Tag

The Tag component is used to display labels or tags with various styles and functionalities.

import { Tag } from '@cerberus/react'

Usage

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

Filled

With Icon

With icon

Closable

To use a closable tag, just pass an onClick prop to the Tag component.

Closable

Customization

You can customize the tag by utilizing the cx function.

Cerberus Forever

API

export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
  TagVariantProps & {
    onClick?: never
  }


export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
  gradient?: never
  palette?: never
  onClick: MouseEventHandler<HTMLSpanElement>
  shape?: never
  usage?: never
}


export type TagProps = StaticTagProps | ClickableTagProps


define function Tag(props: PropsWithChildren<TagProps>): ReactNode

Props

The Tag component accepts the following props:

NameDefaultDescription
gradientundefinedThe gradient of the tag (overrides palette).
palettepageThe color palette of the tag (overrides gradient).
usagefilledThe style treatment of the tag.
shapesquareThe shape of the tag.
onClickundefinedHow to create a Closable tag.

On this page