Components — Modern React UI Library

Examples

Tag Themes

Demonstrates various tag themes, including the loading state.

All tag themes

NormaldangerinfomutedneutralsecondarysuccesswarnLoading

"use client";
import { Tag } from "@g4rcez/components";

function TagThemes() {
  return (
    <div className="flex flex-wrap gap-8">
      <Tag>Normal</Tag>
      <Tag theme="danger">danger</Tag>
      <Tag theme="info">info</Tag>
      <Tag theme="muted">muted</Tag>
      <Tag theme="neutral">neutral</Tag>
      <Tag theme="secondary">secondary</Tag>
      <Tag theme="success">success</Tag>
      <Tag theme="warn">warn</Tag>
      <Tag loading>Loading</Tag>
    </div>
  );
}

Small and Tiny Tags

Examples of tags in small and tiny sizes, demonstrating different levels of visual prominence.

Small tags

Normaldangerinfoneutralsecondarysuccesswarn

Tiny tags

Normaldangerinfosecondarysuccesswarn

"use client";
import { Tag } from "@g4rcez/components";

function SmallAndTinyTags() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-wrap gap-8">
        <Tag size="small">Normal</Tag>
        <Tag size="small" theme="danger">danger</Tag>
        <Tag size="small" theme="info">info</Tag>
        <Tag size="small" theme="neutral">neutral</Tag>
        <Tag size="small" theme="secondary">secondary</Tag>
        <Tag size="small" theme="success">success</Tag>
        <Tag size="small" theme="warn">warn</Tag>
      </div>
      <div className="flex flex-wrap gap-8">
        <Tag theme="primary" size="tiny">Normal</Tag>
        <Tag theme="danger" size="tiny">danger</Tag>
        <Tag theme="info" size="tiny">info</Tag>
        <Tag theme="secondary" size="tiny">secondary</Tag>
        <Tag theme="success" size="tiny">success</Tag>
        <Tag theme="warn" size="tiny">warn</Tag>
      </div>
    </div>
  );
}

Tags with Indicators

Neutral-themed tags enhanced with colored indicators for status or additional visual cues.

Small tags

Normaldangerinfosecondarysuccesswarn

"use client";
import { Tag } from "@g4rcez/components";

function TagsWithIndicators() {
  return (
    <div className="flex flex-wrap gap-8">
      <Tag size="small" theme="neutral">Normal</Tag>
      <Tag size="small" theme="neutral" indicator="danger">danger</Tag>
      <Tag size="small" theme="neutral" indicator="info">info</Tag>
      <Tag size="small" theme="neutral" indicator="secondary">secondary</Tag>
      <Tag size="small" theme="neutral" indicator="success">success</Tag>
      <Tag size="small" theme="neutral" indicator="warn">warn</Tag>
    </div>
  );
}

When to use Tags

Use when

You need the documented Tags interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Tags behavior you need.

Accessibility

Keep the Tags labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.