Tag

Stable

Compact elements for categorization, filtering, and selection.

Examples

Variants

BaseSystemAI CoreSecureDraft
tsx
<div className="flex gap-2">
  <Tag variant="default">Base</Tag>
  <Tag variant="neon">System</Tag>
  <Tag variant="neonPurple">AI Core</Tag>
  <Tag variant="neonGreen">Secure</Tag>
  <Tag variant="outline">Draft</Tag>
</div>

Features

CommandDelete MeActive Filter
tsx
<div className="flex gap-2">
  <Tag icon={<Terminal className="w-3 h-3" />}>With Icon</Tag>
  <Tag removable onRemove={() => {}}>Removable</Tag>
  <Tag interactive selected={true}>Selected State</Tag>
</div>

Tag Group (Multi-select)

FirewallNetworkTerminal
tsx
export function FilterTags() {
  const [selected, setSelected] = React.useState<string[]>(['firewall']);
  
  return (
    <TagGroup
      variant="neon"
      selected={selected}
      onSelectionChange={setSelected}
      tags={[
        { label: 'Firewall', value: 'firewall', icon: <Shield className="w-3 h-3" /> },
        { label: 'Network', value: 'network', icon: <Network className="w-3 h-3" /> },
        { label: 'Terminal', value: 'terminal', icon: <Terminal className="w-3 h-3" /> },
      ]}
    />
  );
}

API Reference

PropertyDescriptionTypeDefault
variantVisual style."default" | "neon" | "neonPurple" | "neonGreen" | "outline"-
sizeSize of the tag."sm" | "md" | "lg"-
interactiveMakes the tag focusable and hoverable.boolean-
selectedApplies active/selected styling.boolean-
removableShows an "X" button.boolean-
iconReact node rendered before the label.ReactNode-