Tag

The Tag component is used to display small, interactive elements with optional icons, reset functionality, and customizable styles.

Usage

import { Tag } from '@harnessio/ui/components'

// Basic usage
<Tag value="Default Tag" />

// Theme
<Tag value="Blue Tag" theme="blue" />

// Variant
<Tag value="Outline Tag" variant="outline" theme="blue" />

// Rounded tag
<Tag
  value="Rounded Outline Tag"
  variant="outline"
  rounded
  theme="pink"
/>

// Split tag
<Tag
  label="Split"
  value="Lime"
  variant="secondary"
  theme="lime"
/>

// Tag with icon
<Tag
  value="Outline Icon"
  variant="outline"
  showIcon
  theme="yellow"
/>

// Tag with custom icon
<Tag
  value="Custom Icon"
  variant="outline"
  showIcon
  icon="plus"
  theme="mint"
/>

// Tag with reset
<Tag
  value="Outline Reset"
  variant="outline"
  actionIcon="xmark"
  onActionClick={() => alert('Reset clicked')}
  theme="blue"
/>

// Tag with icon and reset
<Tag
  value="Outline Icon Reset"
  variant="outline"
  showIcon
  actionIcon="xmark"
  onActionClick={() => alert('Reset clicked')}
  theme="yellow"
/>

Props

Prop	Required	Default	Type
variant	false	'outline'	'outline' | 'secondary'
size	false	'md'	'sm' | 'md'
theme	false	'gray'	'gray' | 'blue' | 'green' | 'red' | ...
rounded	false	false	boolean
icon	false		string
actionIcon	false	false	IconV2Name
onActionClick	false		() => void
enableHover	false	false	boolean
label	false		string
value	true		string