# Control Chip
URL: /react/components/control-chip
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/(deprecated)/control-chip.mdx



<Callout type="warn">
  더 이상 사용되지 않습니다. [Chip](/react/components/chip)의 `Chip.Toggle` 또는 `Chip.Button`을 사용하세요.
</Callout>

## Preview

```tsx
import { ControlChip } from "seed-design/ui/control-chip";

export default function ControlChipPreview() {
  return <ControlChip.Toggle>라벨</ControlChip.Toggle>;
}
```

## Installation

- npm: npx @seed-design/cli@latest add ui:control-chip
- pnpm: pnpm dlx @seed-design/cli@latest add ui:control-chip
- yarn: yarn dlx @seed-design/cli@latest add ui:control-chip
- bun: bun x @seed-design/cli@latest add ui:control-chip

## Props

### ControlChip.Button

### ControlChip.Toggle

### ControlChip.RadioRoot

### ControlChip.RadioItem

## Examples

### Medium

```tsx
import { ControlChip } from "seed-design/ui/control-chip";

export default function ActionChipMedium() {
  return <ControlChip.Toggle size="medium">라벨</ControlChip.Toggle>;
}
```

### Small

```tsx
import { ControlChip } from "seed-design/ui/control-chip";

export default function ActionChipSmall() {
  return <ControlChip.Toggle size="small">라벨</ControlChip.Toggle>;
}
```

### Icon Only

```tsx
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { Icon } from "@seed-design/react";
import { ControlChip } from "seed-design/ui/control-chip";

export default function ControlChipIconOnly() {
  return (
    <ControlChip.Toggle layout="iconOnly" inputProps={{ "aria-label": "추가" }}>
      <Icon svg={<IconPlusFill />} />
    </ControlChip.Toggle>
  );
}
```

### Prefix Icon

```tsx
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ControlChip } from "seed-design/ui/control-chip";

export default function ControlChipPrefixIcon() {
  return (
    <ControlChip.Toggle>
      <PrefixIcon svg={<IconPlusFill />} />
      라벨
    </ControlChip.Toggle>
  );
}
```

### Suffix Icon

```tsx
import { IconChevronDownFill } from "@karrotmarket/react-monochrome-icon";
import { SuffixIcon } from "@seed-design/react";
import { ControlChip } from "seed-design/ui/control-chip";

export default function ControlChipSuffixIcon() {
  return (
    <ControlChip.Toggle>
      라벨
      <SuffixIcon svg={<IconChevronDownFill />} />
    </ControlChip.Toggle>
  );
}
```