removeIcon

The removeIcon prop allows you to customize the remove button icon for all items in the list. It accepts any valid React node, making it flexible for various icon libraries or custom elements.

Type Definition

type RemoveIconProp = React.ReactNode;

Basic Usage

BasicExample.tsx

import { XMarkIcon } from '@heroicons/react/24/solid'
 
export default function BasicExample() {
  return (
    <Chipster defaultValue={['React', 'TypeScript']}>
      <Chipster.ItemList 
        removeIcon={<XMarkIcon className="h-4 w-4" />}
      />
      <Chipster.Input placeholder="Add more..." />
    </Chipster>
  )
}

With Custom SVG

CustomSvgExample.tsx

export default function CustomSvgExample() {
  return (
    <Chipster>
      <Chipster.ItemList 
        removeIcon={
          <svg 
            viewBox="0 0 24 24" 
            className="h-4 w-4 fill-current"
          >
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
          </svg>
        }
      />
      <Chipster.Input placeholder="Type here..." />
    </Chipster>
  )
}

With Dynamic Icons

DynamicIconExample.tsx

import { TrashIcon, XCircleIcon, XMarkIcon } from '@heroicons/react/24/solid'
 
export default function DynamicIconExample() {
  const [iconType, setIconType] = useState<'x' | 'trash' | 'circle'>('x')
  
  const getIcon = () => {
    switch(iconType) {
      case 'trash':
        return <TrashIcon className="h-4 w-4" />
      case 'circle':
        return <XCircleIcon className="h-4 w-4" />
      default:
        return <XMarkIcon className="h-4 w-4" />
    }
  }
 
  return (
    <div>
      <div className="mb-4 space-x-2">
        <button onClick={() => setIconType('x')}>X Icon</button>
        <button onClick={() => setIconType('trash')}>Trash Icon</button>
        <button onClick={() => setIconType('circle')}>Circle Icon</button>
      </div>
      
      <Chipster>
        <Chipster.ItemList removeIcon={getIcon()} />
        <Chipster.Input placeholder="Add items..." />
      </Chipster>
    </div>
  )
}

Important Notes

Applies to all items in the list
Maintains click functionality
Supports any valid React node
Works with both light and dark themes
Preserves hover states
Maintains accessibility
Supports SVG and icon fonts

Common Use Cases

Custom icon libraries (HeroIcons, FontAwesome, etc.)
Brand-specific icons
Animated icons
Theme-specific icons
Status-based icons
Size variations
Interactive states
Accessibility enhancements

With Multiple Icons

IconLibraryExample.tsx

import { FaTimes, FaTrash, FaBan } from 'react-icons/fa'
import { IconType } from 'react-icons'
 
export default function IconLibraryExample() {
  const icons: Record<string, IconType> = {
    remove: FaTimes,
    trash: FaTrash,
    ban: FaBan
  }
 
  const [currentIcon, setCurrentIcon] = useState<keyof typeof icons>('remove')
  const Icon = icons[currentIcon]
 
  return (
    <Chipster>
      <Chipster.ItemList 
        removeIcon={<Icon className="h-4 w-4" />}
      />
      <Chipster.Input placeholder="Type here..." />
    </Chipster>
  )
}

iconClassName validationRules