Tag

PreviousNext

A versatile badge component that displays labeled tags with customizable colors, icons, and display themes for status indicators and categorization

New Feature
'use client';

import { IconsFixture } from '@clubmed/trident-icons/tests/IconsFixture';

import { Tag } from '@/ui/Tag';

export function TagDemo() {
  return (
    <IconsFixture>
      <Tag label="New Feature" icon="Diamond" theme="both" />
    </IconsFixture>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/tag.json

Usage

import { Tag } from '@/docs/lib/ui/tag';
 
export function Component() {
  return (
    <Tag label="New Feature" icon="Diamond" theme="both" backgroundColor="saffron" color="black" />
  );
}

API Reference

Tag

PropTypeDefaultDescription
labelstring""The text label displayed in the tag. Used as the title attribute for accessibility.
iconIconicNamesundefinedOptional icon name from the Trident Icons library to display in the tag.
theme"label" | "icon" | "both" | "swap" | "unfold" | "monogram" | "pill" | "none""both"Display mode for the tag. Controls visibility and layout of icon and label.
backgroundColorBgColor | string"saffron"Background color of the tag. Accepts 17 predefined colors: black, darkGrey, green, lavender, lightGrey, lightSand, marygold, orange, red, saffron, sand, sienna, ultramarine, verdigris, wave, white, or custom Tailwind classes.
colorTextColor | string"black"Text color of the tag. Accepts the same color options as backgroundColor or custom Tailwind classes.
borderBorderColor | stringSame as backgroundColorBorder color of the tag. Accepts the same color options as backgroundColor or custom Tailwind classes.
iconClassNamestringundefinedAdditional CSS classes for the icon element.
iconWidthstring"1.5rem"Width of the icon.
labelClassNamestringundefinedAdditional CSS classes for the label element.
classNamestringundefinedAdditional CSS classes for the tag container.

Notes

  • Theme Modes: The theme prop offers flexible display options:

    • "label": Shows only the label with padding
    • "icon": Shows only the icon (label used for title attribute)
    • "both": Shows both icon and label side by side
    • "swap": Shows icon on mobile, label on larger screens (sm breakpoint)
    • "unfold": Shows icon always, label on larger screens (sm breakpoint)
    • "monogram": Shows label in a circular format (24x24px)
    • "pill": Shows label with compact pill styling (smaller text)
    • "none": Shows both with minimal padding

  • Semantic Role: The component renders with role="note" for accessibility, indicating informational content.

  • Color Customization: All color props accept predefined color names or custom Tailwind CSS classes for maximum flexibility.

  • Conditional Rendering: The tag returns null if both label and icon are empty, preventing empty tags from rendering.

  • Smart Theme Logic: When theme="both" is set but no icon is provided, the component automatically falls back to "label" mode.

  • Responsive Design: The swap and unfold themes use responsive classes to show different content at different screen sizes.

  • HTML Attributes: All standard HTML span attributes are supported via ComponentPropsWithoutRef<"span">.

  • Border Inheritance: By default, the border color matches the background color unless explicitly overridden.