---
title: 칩
---

<Frame>
  <img src="/images/user-guide/github/github-header.png" alt="헤더" />
</Frame>

레이블, 선택적 왼쪽 및 오른쪽 컴포넌트, 다양한 스타일 옵션을 갖춘 시각적 요소로, 레이블과 태그를 표시하는 클릭 가능 또는 클릭 불가 컨테이너로 사용할 수 있습니다.

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { Chip } from 'twenty-ui/components';

    export const MyComponent = () => {
      return (
        <Chip
          size="large"
          label="클릭 가능한 칩"
          clickable={true}
          variant="highlighted"
          accent="text-primary"
          leftComponent
          rightComponent
          maxWidth="200px"
          className
        />
      );
    };

    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티         | 유형                      | 설명                                                        |
    | ------------ | ----------------------- | --------------------------------------------------------- |
    | linkToEntity | 문자열                     | 엔티티에 대한 링크                                                |
    | entityId     | 문자열                     | 엔티티의 고유 식별자                                               |
    | 이름           | 문자열                     | 엔티티의 이름                                                   |
    | pictureUrl   | 문자열                     | 사진",                                                      |
    | avatarType   | 아바타 유형                  | 표시할 아바타의 유형입니다. 두 가지 옵션이 있습니다: `rounded`와 `squared`       |
    | 변형           | `EntityChipVariant` 열거형 | 표시할 엔티티 칩의 변형입니다. 두 가지 옵션이 있습니다: `regular`와 `transparent` |
    | 왼쪽 아이콘       | 아이콘 컴포넌트                | 아이콘을 나타내는 React 컴포넌트입니다. 칩의 왼쪽에 표시됩니다.                    |
  </Tab>
</Tabs>

## 예시

### 투명 비활성 칩

```jsx
import { Chip } from 'twenty-ui/components';

export const MyComponent = () => {
  return (
      <Chip 
      size="large"
      label="투명한 비활성 칩"
      clickable={false}
      variant="rounded"
      accent="text-secondary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
      />    
  );
};

```

<br />

### 툴팁이 포함된 비활성 칩

```jsx
import { Chip } from "twenty-ui/components";
  
export const MyComponent = () => {
  return (
      <Chip 
      size="large"
      label="내용이 넘치면 툴팁이 표시되는 비활성 칩."
      clickable={false}
      variant="regular"
      accent="text-primary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
      />    
  );
};
```

## 엔티티 칩

엔티티에 대한 정보를 표시하기 위한 칩 유사 요소입니다.

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { BrowserRouter as Router } from 'react-router-dom';
    import { IconTwentyStar } from 'twenty-ui/display';
    import { Chip } from 'twenty-ui/components';

    export const MyComponent = () => {
      return (
        <Router>
          <Chip
            linkToEntity="/entity-link"
            entityId="entityTest"
            name="엔터티 이름"
            pictureUrl=""
            avatarType="rounded"
            variant="regular"
            LeftIcon={IconTwentyStar}
          />
        </Router>
      );
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티         | 유형                      | 설명                                                        |
    | ------------ | ----------------------- | --------------------------------------------------------- |
    | linkToEntity | 문자열                     | 엔티티에 대한 링크                                                |
    | entityId     | 문자열                     | 엔티티의 고유 식별자                                               |
    | 이름           | 문자열                     | 엔티티의 이름                                                   |
    | pictureUrl   | 문자열                     | 사진",                                                      |
    | avatarType   | 아바타 유형                  | 표시할 아바타의 유형입니다. 두 가지 옵션이 있습니다: `rounded`와 `squared`       |
    | 변형           | `EntityChipVariant` 열거형 | 표시할 엔티티 칩의 변형입니다. 두 가지 옵션이 있습니다: `regular`와 `transparent` |
    | 왼쪽 아이콘       | 아이콘 컴포넌트                | 아이콘을 나타내는 React 컴포넌트입니다. 칩의 왼쪽에 표시됩니다.                    |
  </Tab>
</Tabs>