Chip

Displays a compact attachment pill with an optional icon and dismiss button.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Chip } from "@aile.sh/elia";

const FileIcon = (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
    <path d="M14 2v6h6" />
  </svg>
);

export function Example() {
  const [attached, setAttached] = useState(true);

  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip>gpt-4o</Chip>
      <Chip icon={FileIcon}>supplier-list.csv</Chip>
      {attached ? (
        <Chip icon={FileIcon} onDismiss={() => setAttached(false)}>
          pricing-2026.pdf
        </Chip>
      ) : (
        <button
          type="button"
          onClick={() => setAttached(true)}
          className="text-[11.5px] font-medium text-accent-ink hover:underline"
        >
          Restore chip
        </button>
      )}
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia