메인 콘텐츠로 건너뛰기
헤더
레이블, 선택적 왼쪽 및 오른쪽 컴포넌트, 다양한 스타일 옵션을 갖춘 시각적 요소로, 레이블과 태그를 표시하는 클릭 가능 또는 클릭 불가 컨테이너로 사용할 수 있습니다. 
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
    />
  );
};

​
예시

​
투명 비활성 칩

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
      />    
  );
};

​
툴팁이 포함된 비활성 칩

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
      />    
  );
};

​
엔티티 칩

엔티티에 대한 정보를 표시하기 위한 칩 유사 요소입니다. 
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>
  );
};