Tag

Stable

Compact monospace categorization tokens supporting interactive toggling, dismissible close glyphs, multi-select tag groups, and cybernetic neon halos.

Installation

$pnpm add @siberui/react

Import

tsx

import { Tag, TagGroup } from '@siberui/react';

Basic Usage & Interactive Badges

Tags render compact monospace labels with optional leading icons, interactive click states, and glowing active outlines.

BASH_SHELLTLS_1.3QUANTUM_CORE

tsx

<div className="flex flex-wrap gap-3">
  <Tag icon={<Terminal className="w-3 h-3" />} variant="neon">BASH_SHELL</Tag>
  <Tag icon={<Shield className="w-3 h-3" />} variant="neonGreen">TLS_1.3</Tag>
  <Tag icon={<Cpu className="w-3 h-3" />} variant="neonPurple">QUANTUM_CORE</Tag>
</div>

Visual Variants (Neon, Purple, Green, Outline)

Select between glowing neon, neonPurple, neonGreen, solid default, or transparent outline.

DEFAULT_TAGNEON_CYANNEON_PURPLENEON_GREENOUTLINE_TAG

tsx

<div className="flex flex-wrap gap-3">
  <Tag variant="default">DEFAULT_TAG</Tag>
  <Tag variant="neon">NEON_CYAN</Tag>
  <Tag variant="neonPurple">NEON_PURPLE</Tag>
  <Tag variant="neonGreen">NEON_GREEN</Tag>
  <Tag variant="outline">OUTLINE_TAG</Tag>
</div>

Dismissible & Removable Tags

Pass removable and bind onRemove to display an interactive dismissal button.

ORBITAL_01FRA_GATEWAYKYBER_1024SAT_RELAY

tsx

<div className="flex flex-wrap gap-3">
  {tagsList.map((tag) => (
    <Tag
      key={tag}
      variant="neon"
      removable
      onRemove={() => setTagsList(tagsList.filter((t) => t !== tag))}
    >
      {tag}
    </Tag>
  ))}
</div>

TagGroup Multi-Select Filter Sets

Use TagGroup for controlled multi-tag filtering arrays with built-in toggle mechanics.

Firewall FilterLattice CryptoNetwork MeshCommand Shell

Active Filters: [firewall, lattice]

tsx

const [selectedTags, setSelectedTags] = React.useState<string[]>(['firewall', 'lattice']);

<TagGroup
  variant="neon"
  selected={selectedTags}
  onSelectionChange={setSelectedTags}
  tags={filterOptions}
/>

Scale & Density (sm, md, lg)

Adjust badge heights across sm (20px), md (24px), and lg (28px).

SM (20PX)MD (24PX)LG (28PX)

tsx

<div className="flex items-end justify-center gap-4">
  <Tag size="sm" variant="neon">SM (20PX)</Tag>
  <Tag size="md" variant="neon">MD (24PX)</Tag>
  <Tag size="lg" variant="neon">LG (28PX)</Tag>
</div>

Frosted Cyber-Glass Subnet Filter Matrix

Compose tag filter dialogs layered on top of circuit substrate textures with perimeter laser sweeps.

CLUSTER FILTER MATRIX

LIVE QUERY

Firewall FilterLattice CryptoNetwork MeshCommand Shell

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-4">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <span className="font-mono text-xs font-bold text-white tracking-wider">CLUSTER FILTER MATRIX</span>
      <Badge variant="glass" dot dotColor="cyan">LIVE QUERY</Badge>
    </div>

    <TagGroup
      variant="neon"
      selected={selectedTags}
      onSelectionChange={setSelectedTags}
      tags={filterOptions}
    />

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        APPLY CLUSTER FILTER
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Threat Taxonomy Deck

Composite mission taxonomy card with active attack vector tags.

ATTACK VECTOR TAXONOMY

ELEVATED

Identified intrusion vectors in current operational sector.

SYN_FLOODLATTICE_INJECTIONZERO_DAY_QUARANTINEDPORT_8443

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">ATTACK VECTOR TAXONOMY</CardTitle>
      <Badge variant="neon" size="sm">ELEVATED</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Identified intrusion vectors in current operational sector.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-3">
    <div className="flex flex-wrap gap-2">
      <Tag variant="neon" selected>SYN_FLOOD</Tag>
      <Tag variant="neonPurple" selected>LATTICE_INJECTION</Tag>
      <Tag variant="neonGreen">ZERO_DAY_QUARANTINED</Tag>
      <Tag variant="outline">PORT_8443</Tag>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (6)← swipe to inspect →

Property	Description	Type	Default
variant	Visual color fill and glowing laser perimeter style.	"default" \| "neon" \| "neonPurple" \| "neonGreen" \| "outline"	"default"
size	Physical badge height ("sm" = 20px, "md" = 24px, "lg" = 28px).	"sm" \| "md" \| "lg"	"md"
selected	Applies active filled background and illuminated glow shadow.	boolean	false
removable	Renders an interactive "X" dismiss button on the right edge.	boolean	false
onRemove	Callback fired when the user clicks the dismiss button.	() => void	-
icon	Optional ReactNode icon element preceding the label.	React.ReactNode	-

Accessibility

Interactive Roles: When an onClick handler is bound, the tag automatically receives role="button", keyboard Space/Enter listeners, and aria-pressed.
Dismiss Button: The remove icon contains an explicit aria-label="Remove tag".

Best Practices

Tags vs Badges: Use Tag when items are selectable, removable, or represent interactive metadata filters; use Badge for static status pills.

Tag