Ana içeriğe atla
Başlık
Etiketleri ve ‘tag’leri görüntülemek için, bir etiket metni, isteğe bağlı sol ve sağ bileşenler ve çeşitli stil seçenekleriyle tıklanabilir veya tıklanamaz bir kapsayıcı olarak kullanabileceğiniz görsel bir öğe. 
import { Chip } from 'twenty-ui/components';

export const MyComponent = () => {
  return (
    <Chip
      size="large"
      label="Tıklanabilir Chip"
      clickable={true}
      variant="highlighted"
      accent="text-primary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
    />
  );
};

​
Örnekler

​
Şeffaf Devre Dışı Çip

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

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

​
Araç İpucuyla Devre Dışı Çip

import { Chip } from "twenty-ui/components";
  
export const MyComponent = () => {
  return (
      <Chip 
      size="large"
      label="Taştığında araç ipucunu tetikleyen devre dışı Chip."
      clickable={false}
      variant="regular"
      accent="text-primary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
      />    
  );
};

​
Varlık Çipi

Bir varlık hakkında bilgi göstermek için bir Çip benzeri öğe. 
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="Varlık adı"
        pictureUrl=""
        avatarType="rounded"
        variant="regular"
        LeftIcon={IconTwentyStar}
      />
    </Router>
  );
};