Tag

Tags help people filter content or see metadata at a glance.

overviewguidelinesdeva11y
import { Tag } from '@cerberus/react'

Usage

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

Text

Preview Playground

import { Tag, type TagProps, Show } from '@cerberus/react' // "none" is not a valid gradient value. We just use it for the playground. export function MyTag(props: TagProps) { return ( <Show when={Boolean(props.onClick)} fallback={ <Tag gradient="none" palette="page" shape="square" usage="filled" > {props.children} </Tag> }> <Tag onClick={props.onClick}> {props.children} </Tag> </Show> ) }

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.

Wu-Tang 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.