> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 칩

<Frame>
  <img src="https://mintcdn.com/twenty/JIRRbviz5phT8G2L/images/user-guide/github/github-header.png?fit=max&auto=format&n=JIRRbviz5phT8G2L&q=85&s=7b60b304ddd2fead6c55719cbdd7cd32" alt="헤더" width="1440" height="680" data-path="images/user-guide/github/github-header.png" />
</Frame>

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

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

    export const MyComponent = () => {
      return (
        <Chip
          size="large"
          label="Clickable Chip"
          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 theme={null}
import { Chip } from 'twenty-ui/components';

export const MyComponent = () => {
  return (
      <Chip 
      size="large"
      label="Transparent Disabled Chip"
      clickable={false}
      variant="rounded"
      accent="text-secondary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
      />    
  );
};

```

<br />

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

```jsx theme={null}
import { Chip } from "twenty-ui/components";
  
export const MyComponent = () => {
  return (
      <Chip 
      size="large"
      label="Disabled chip that triggers a tooltip when overflowing."
      clickable={false}
      variant="regular"
      accent="text-primary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
      />    
  );
};
```

## 엔티티 칩

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

<Tabs>
  <Tab title="사용법">
    ```jsx theme={null}
    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="Entity name"
            pictureUrl=""
            avatarType="rounded"
            variant="regular"
            LeftIcon={IconTwentyStar}
          />
        </Router>
      );
    };
    ```
  </Tab>

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