Chips

The following chips component is used for displaying tags. It can be used as a single component and styled quite easily. It has some predefined variants and sizes so not much effort is required in most scenario but you can easily add your own depending on your needs. It also handles deletion and can act as a link flawlessly.

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Chip from './components/chip';

const App = () => {
  const handleDelete = (label) => { alert(`Deleted: ${label}`); };
  return (
    <div className="p-4">
      <h1 className="text-xl mb-4">Chip Component Example</h1>
      <Chip
        label="Link Chip"
        link="https://example.com" // Link behavior
        variant="primary"
        size="medium"
        className="mr-2"
      />
      <Chip
        label="Deletable Tag"
        variant="secondary"
        size="medium"
        className="mr-2"
        onDelete={() => handleDelete('Deletable Tag')}
      />
      <Chip
        label="Non-Deletable Tag"
        variant="danger"
        size="medium"
        className="mr-2"
      />
      <Chip
        label="Info Chip"
        variant="default"
        size="small"
        className="mr-2"
      />
    </div>
  );
};

export default App;

Component

chips.jsx

// Chip.jsx
import React from 'react';

const Chip = ({
  label,
  onDelete,
  className = '',
  variant = 'default',
  size = 'medium',
  link,
}) => {
  const baseStyles = 'inline-flex items-center px-2 rounded-full font-medium cursor-pointer';

  const variants = {
    default: 'bg-gray-200 text-gray-800',
    primary: 'bg-blue-200 text-blue-800',
    secondary: 'bg-green-200 text-green-800',
    danger: 'bg-red-200 text-red-800',
  };

  const sizes = {
    small: 'text-sm py-1',
    medium: 'text-base py-2',
    large: 'text-lg py-3',
  };

  const handleClick = (e) => {
    if (link) window.location.href = link;
  };

  return (
    <div
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
      onClick={handleClick}
    >
      <span className='px-2'>{label}</span>
      {onDelete && (
        <button
          onClick={(e) => {
            e.stopPropagation();
            onDelete();
          }}
          className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none"
          aria-label="Remove chip"
        >
          &times;
        </button>
      )}
    </div>
  );
};

export default Chip;