Tag

A single-color chip with no interaction logic — color it with any background utility.

Installation

$npx litefy@latest add tag

$pnpm dlx litefy@latest add tag

$yarn dlx litefy@latest add tag

$bun --bun litefy@latest add tag

Usage

Tag is a pure display chip: rounded, single background color, no hover or focus states. Without a color utility it falls back to a muted surface.

defaultstablebetadeprecatedv2.0

import { Tag } from "@/ui";

export default function TagBasicDemo() {
  return (
    <div className="flex w-full max-w-md flex-wrap items-center justify-center gap-2">
      <Tag>default</Tag>
      <Tag className="bg-emerald-600 text-white">stable</Tag>
      <Tag className="bg-amber-500 text-white">beta</Tag>
      <Tag className="bg-red-600 text-white">deprecated</Tag>
      <Tag className="bg-sky-600 text-white">v2.0</Tag>
    </div>
  );
}

Coloring

The chip is one flat color — pass any Tailwind background utility plus a contrasting text color.

Link and button variants

Tag always renders a span and does not provide an as prop. For link or button scenarios, apply Tag.className to a native element directly:

link tag

import { cn, Tag } from "@/ui";

export default function TagVariantsDemo() {
  return (
    <div className="flex items-center gap-3">
      <a href="#" className={cn(Tag.className, "bg-violet-600 text-white")}>link tag</a>
      <button type="button" className={cn(Tag.className, "bg-emerald-600 text-white")}>button tag</button>
    </div>
  );
}

Notes

Tag only defines shape and typography — radius follows --radius, and background/text color come entirely from utilities, so it never fights your theme.
Tag.className is the static base class string of the chip — reuse it on native elements when you need semantics span cannot carry (a, button).
Combine with the Capsule component to build shields-io style badges.

API Reference

Tag

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom CSS class, background/text color via utilities
`...props`	`React.ComponentProps<"span">`	-	Supports all native span props

Statics

Member	Type	Description
`Tag.className`	`string`	Base class string of the chip, for reuse on native elements

Tag

On this page