file: ./content/react/components/chip.mdx
# Chip

Chip은 사용자가 선택, 필터링, 전환과 같은 제어 작업을 수행할 수 있도록 돕는 Pill 형태의 컴포넌트입니다. ActionChip과 ControlChip을 통합한 새로운 컴포넌트입니다.

<ComponentExample name="chip-preview">
  ```tsx
  import { Chip } from "@/registry/ui/chip";

  export default function ChipPreview() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button>
          <Chip.Label>Button Chip</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.Label>Toggle Chip</Chip.Label>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add chip
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add chip
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add chip
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add chip
    ```
  </Tab>
</Tabs>

<ManualInstallation name="chip" />

## Props

### Chip.Button

<TypeTable
  type={{
    children: {
        "type": "ReactNode",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    variant: {
        "type": "\"solid\" | \"outlineStrong\" | \"outlineWeak\"",
        "default": "solid"
    },

    size: {
        "type": "\"large\" | \"medium\" | \"small\"",
        "default": "medium"
    },

    layout: {
        "type": "\"iconOnly\" | \"withText\"",
        "default": "withText"
    }
}}
/>

### Chip.Toggle

<TypeTable
  type={{
    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    variant: {
        "type": "\"solid\" | \"outlineStrong\" | \"outlineWeak\"",
        "default": "solid"
    },

    size: {
        "type": "\"large\" | \"medium\" | \"small\"",
        "default": "medium"
    },

    layout: {
        "type": "\"iconOnly\" | \"withText\"",
        "default": "withText"
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    },

    required: {
        "type": "boolean",
        "default": undefined
    },

    checked: {
        "type": "boolean",
        "default": undefined
    },

    defaultChecked: {
        "type": "boolean",
        "default": undefined
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void)",
        "default": undefined
    },

    indeterminate: {
        "type": "boolean",
        "default": undefined
    }
}}
/>

### Chip.RadioRoot

<TypeTable
  type={{
    disabled: {
        "type": "boolean",
        "default": undefined
    },

    name: {
        "type": "string",
        "default": undefined
    },

    form: {
        "type": "string",
        "default": undefined
    },

    value: {
        "type": "string",
        "default": undefined
    },

    defaultValue: {
        "type": "string",
        "default": undefined
    },

    onValueChange: {
        "type": "((value: string) => void)",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### Chip.RadioItem

<TypeTable
  type={{
    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    variant: {
        "type": "\"solid\" | \"outlineStrong\" | \"outlineWeak\"",
        "default": "solid"
    },

    size: {
        "type": "\"large\" | \"medium\" | \"small\"",
        "default": "medium"
    },

    layout: {
        "type": "\"iconOnly\" | \"withText\"",
        "default": "withText"
    },

    value: {
        "type": "string",
        "default": undefined
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    }
}}
/>

## Examples

### Size: Small

<ComponentExample name="chip-small">
  ```tsx
  import { Chip } from "@/registry/ui/chip";

  export default function ChipSmall() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button size="small">
          <Chip.Label>Small Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="small">
          <Chip.Label>Small Toggle</Chip.Label>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

### Size: Medium

<ComponentExample name="chip-medium">
  ```tsx
  import { Chip } from "@/registry/ui/chip";

  export default function ChipMedium() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button size="medium">
          <Chip.Label>Medium Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="medium">
          <Chip.Label>Medium Toggle</Chip.Label>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

### Size: Large

<ComponentExample name="chip-large">
  ```tsx
  import { Chip } from "@/registry/ui/chip";
  import { HStack } from "@seed-design/react";

  export default function ChipLarge() {
    return (
      <HStack gap="x2" align="center">
        <Chip.Button size="large">
          <Chip.Label>Large Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="large">
          <Chip.Label>Large Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Variant: Solid

<ComponentExample name="chip-solid">
  ```tsx
  import { Chip } from "@/registry/ui/chip";

  export default function ChipSolid() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button variant="solid">
          <Chip.Label>Solid Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="solid">
          <Chip.Label>Solid Toggle</Chip.Label>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

### Variant: Outline Strong

<ComponentExample name="chip-outline-strong">
  ```tsx
  import { Chip } from "@/registry/ui/chip";

  export default function ChipOutlineStrong() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button variant="outlineStrong">
          <Chip.Label>Outline Strong Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="outlineStrong">
          <Chip.Label>Outline Strong Toggle</Chip.Label>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

### Variant: Outline Weak

<ComponentExample name="chip-outline-weak">
  ```tsx
  import { Chip } from "@/registry/ui/chip";

  export default function ChipOutlineWeak() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button variant="outlineWeak">
          <Chip.Label>Outline Weak Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="outlineWeak">
          <Chip.Label>Outline Weak Toggle</Chip.Label>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="chip-prefix-icon">
  ```tsx
  import { Chip } from "@/registry/ui/chip";
  import { IconHeartFill } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";

  export default function ChipPrefixIcon() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button>
          <Chip.PrefixIcon>
            <Icon svg={<IconHeartFill />} />
          </Chip.PrefixIcon>
          <Chip.Label>With Icon Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.PrefixIcon>
            <Icon svg={<IconHeartFill />} />
          </Chip.PrefixIcon>
          <Chip.Label>With Icon Toggle</Chip.Label>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="chip-suffix-icon">
  ```tsx
  import { Chip } from "@/registry/ui/chip";
  import { IconChevronDownLine } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";

  export default function ChipSuffixIcon() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button>
          <Chip.Label>Button with Suffix</Chip.Label>
          <Chip.SuffixIcon>
            <Icon svg={<IconChevronDownLine />} />
          </Chip.SuffixIcon>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.Label>Toggle with Suffix</Chip.Label>
          <Chip.SuffixIcon>
            <Icon svg={<IconChevronDownLine />} />
          </Chip.SuffixIcon>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

### Prefix Avatar

아바타와 함께 사용할 수 있습니다.

<ComponentExample name="chip-prefix-avatar">
  ```tsx
  import { Chip } from "@/registry/ui/chip";
  import { Avatar } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function ChipPrefixAvatar() {
    return (
      <div className="flex items-center gap-2">
        <Chip.Button>
          <Chip.PrefixAvatar>
            <Avatar
              size="24"
              src="https://avatars.githubusercontent.com/u/54893898?v=4"
              fallback={<IdentityPlaceholder />}
            />
          </Chip.PrefixAvatar>
          <Chip.Label>With Avatar Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.PrefixAvatar>
            <Avatar
              size="24"
              src="https://avatars.githubusercontent.com/u/54893898?v=4"
              fallback={<IdentityPlaceholder />}
            />
          </Chip.PrefixAvatar>
          <Chip.Label>With Avatar Toggle</Chip.Label>
        </Chip.Toggle>
      </div>
    );
  }
  ```
</ComponentExample>

## Migration from ActionChip/ControlChip

기존 ActionChip과 ControlChip은 새로운 Chip 컴포넌트로 통합되었습니다.

### ActionChip → Chip.Button

```tsx
// Before
import { ActionChip } from "@seed-design/react";

<ActionChip size="medium">Label</ActionChip>

// After
import { Chip } from "@seed-design/react";

<Chip.Button size="medium" variant="solid">Label</Chip.Button>
```

### ControlChip → Chip.Toggle

```tsx
// Before
import { ControlChip } from "@seed-design/react";

<ControlChip size="medium">Label</ControlChip>

// After
import { Chip } from "@seed-design/react";

<Chip.Toggle size="medium" variant="outlineStrong">Label</Chip.Toggle>
```