Zum Hauptinhalt springen
Kopfzeile
Ein visuelles Element, das Sie als klickbaren oder nicht klickbaren Container mit einem Etikett, optionalen linken und rechten Komponenten und verschiedenen Stiloptionen verwenden können, um Etiketten und Tags anzuzeigen. 
import { Chip } from 'twenty-ui/components';

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

​
Beispiele

​
Transparenter deaktivierter Chip

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

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

​
Deaktivierter Chip mit Tooltip

import { Chip } from "twenty-ui/components";
  
export const MyComponent = () => {
  return (
      <Chip 
      size="large"
      label="Deaktivierter Chip, der bei Überlauf einen Tooltip auslöst."
      clickable={false}
      variant="regular"
      accent="text-primary"
      leftComponent
      rightComponent
      maxWidth="200px"
      className
      />    
  );
};

​
Entity-Chip

Ein Chip-ähnliches Element, um Informationen über eine Entität anzuzeigen. 
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="Entitätsname"
        pictureUrl=""
        avatarType="rounded"
        variant="regular"
        LeftIcon={IconTwentyStar}
      />
    </Router>
  );
};