# Chip

> Compact element for tags, filters, and small actions. Supports icons, removable state, and color tokens.

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://sisyphosui.com/docs/components/chip

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

```tsx
import "@sisyphos-ui/react/styles.css";
import { Chip } from "@sisyphos-ui/react";
```

## Framework usage

### React 18+

```tsx
import { Chip } from "@sisyphos-ui/react";

export const Tag = () => <Chip color="primary" variant="soft">Featured</Chip>;
```

### Vue 3+

```vue
<script setup lang="ts">
import { Chip } from "@sisyphos-ui/vue";
</script>

<template>
  <Chip color="primary" variant="soft">Featured</Chip>
</template>
```

### Angular 17+

```ts
import { Component } from "@angular/core";
import { Chip } from "@sisyphos-ui/angular";

@Component({
  selector: "app-tag",
  standalone: true,
  imports: [Chip],
  template: `<sui-chip color="primary" variant="soft">Featured</sui-chip>`,
})
export class TagComponent {}
```

## Examples

### Semantic colors

```tsx
import { Chip } from "@sisyphos-ui/react";

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip>Default</Chip>
      <Chip color="primary">Primary</Chip>
      <Chip color="success">Success</Chip>
      <Chip color="error">Error</Chip>
      <Chip color="warning">Warning</Chip>
      <Chip color="info">Info</Chip>
    </div>
  );
}
```

### Variants

```tsx
import { Chip } from "@sisyphos-ui/react";

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip variant="contained" color="primary">Contained</Chip>
      <Chip variant="outlined"  color="primary">Outlined</Chip>
      <Chip variant="soft"      color="primary">Soft</Chip>
    </div>
  );
}
```

### Deletable

Pass `onDelete` to render a trailing close button (separate click target).

```tsx
import { useState } from "react";
import { Chip } from "@sisyphos-ui/react";

export function Example() {
  const [tags, setTags] = useState(["react", "typescript", "vite", "tailwind"]);

  return (
    <div className="flex flex-wrap items-center gap-2">
      {tags.map((tag) => (
        <Chip
          key={tag}
          color="primary"
          variant="soft"
          onDelete={() => setTags((xs) => xs.filter((x) => x !== tag))}
        >
          {tag}
        </Chip>
      ))}
    </div>
  );
}
```

### Clickable filter chips

`clickable` turns a chip into a focusable, keyboard-activatable button.

```tsx
import { useState } from "react";
import { Chip } from "@sisyphos-ui/react";

export function Example() {
  const [selected, setSelected] = useState<string | null>("design");
  const tags = ["design", "frontend", "backend", "devops", "docs"];

  return (
    <>
      {tags.map((tag) => (
        <Chip
          key={tag}
          clickable
          variant={selected === tag ? "contained" : "outlined"}
          color="primary"
          onClick={() => setSelected(selected === tag ? null : tag)}
        >
          {tag}
        </Chip>
      ))}
    </>
  );
}
```

### With icons

`startIcon`/`endIcon` bracket the label. Use `radius="full"` for pill chips.

```tsx
import { Chip } from "@sisyphos-ui/react";

const TagIcon = () => (
  <svg viewBox="0 0 24 24" width={12} height={12} aria-hidden="true">
    <path fill="currentColor" d="M20.59 13.41l-8-8A2 2 0 0011.17 5H4v7.17a2 2 0 00.59 1.42l8 8a2 2 0 002.83 0l5.17-5.17a2 2 0 000-2.83zM7 9a2 2 0 112-2 2 2 0 01-2 2z" />
  </svg>
);
const CheckIcon = () => (
  <svg viewBox="0 0 24 24" width={12} height={12} aria-hidden="true">
    <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
  </svg>
);

export function Example() {
  return (
    <>
      <Chip startIcon={<TagIcon />} color="primary" variant="soft">
        Feature request
      </Chip>
      <Chip endIcon={<CheckIcon />} color="success" variant="soft">
        Approved
      </Chip>
      <Chip radius="full" variant="outlined">full radius</Chip>
      <Chip startIcon={<TagIcon />} endIcon={<CheckIcon />} variant="contained" color="info">
        Both icons
      </Chip>
    </>
  );
}
```

### Disabled

Disables clicks, delete actions, and focus.

```tsx
import { Chip } from "@sisyphos-ui/react";

export function Example() {
  return (
    <>
      <Chip disabled>Disabled</Chip>
      <Chip disabled color="success" variant="soft">Status · locked</Chip>
      <Chip disabled clickable onClick={() => {}}>Disabled + clickable</Chip>
      <Chip disabled color="primary" onDelete={() => {}}>Disabled + onDelete</Chip>
    </>
  );
}
```

### Real world — active filters

Removable filter Chips inside a Card, with a Clear all Button.

```tsx
import { Button, Card, Chip } from "@sisyphos-ui/react";
import { useState } from "react";

export function ActiveFilters() {
  const [filters, setFilters] = useState([
    { label: "Status: Active", color: "success" },
    { label: "Plan: Team", color: "primary" },
    { label: "Role: Admin", color: "info" },
  ]);
  return (
    <Card>
      <Card.Body>
        <div className="flex items-center justify-between">
          <span>Active filters</span>
          <Button variant="text" size="sm" onClick={() => setFilters([])}>
            Clear all
          </Button>
        </div>
        <div className="mt-2 flex flex-wrap gap-2">
          {filters.map((f) => (
            <Chip
              key={f.label}
              variant="soft"
              color={f.color as "primary" | "success" | "info"}
              onDelete={() => setFilters((xs) => xs.filter((x) => x.label !== f.label))}
            >
              {f.label}
            </Chip>
          ))}
        </div>
      </Card.Body>
    </Card>
  );
}
```

<!-- exports: { "Chip": "@sisyphos-ui/react" } -->