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



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

## Preview

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

export default function ActionChipPreview() {
  return <ActionChip>라벨</ActionChip>;
}
```

## Usage

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

```tsx
<ActionChip />
```

## Props

## Examples

### Medium

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

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

### Small

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

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

### Icon Only

```tsx
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { ActionChip, Icon } from "@seed-design/react";

export default function ActionChipIconOnly() {
  return (
    <ActionChip layout="iconOnly" aria-label="추가">
      <Icon svg={<IconPlusFill />} />
    </ActionChip>
  );
}
```

### Prefix Icon

```tsx
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { ActionChip, PrefixIcon } from "@seed-design/react";

export default function ActionChipPrefixIcon() {
  return (
    <ActionChip>
      <PrefixIcon svg={<IconPlusFill />} />
      라벨
    </ActionChip>
  );
}
```

### Suffix Icon

```tsx
import { IconChevronDownFill } from "@karrotmarket/react-monochrome-icon";
import { ActionChip, SuffixIcon } from "@seed-design/react";

export default function ActionChipSuffixIcon() {
  return (
    <ActionChip>
      라벨
      <SuffixIcon svg={<IconChevronDownFill />} />
    </ActionChip>
  );
}
```