Chip

import { Avatar, Chip } from 'twenty-ui/primitives/data-display';

export const AssigneeChip = () => (
  <Chip
    variant="soft"
    startElement={
      <Avatar name="Jane" size="sm" shape="circle" imageProps={{ alt: '' }} />
    }
  >
    Jane
  </Chip>
);

import { Avatar, Chip } from 'twenty-ui/primitives/data-display';

type AssigneeActionProps = {
  onOpenAssignee: () => void;
  disabled?: boolean;
};

export const AssigneeAction = ({
  onOpenAssignee,
  disabled,
}: AssigneeActionProps) => (
  <Chip
    render={<button type="button" disabled={disabled} />}
    onClick={onOpenAssignee}
    aria-label="Open Jane's record"
    startElement={
      <Avatar name="Jane" size="sm" shape="circle" imageProps={{ alt: '' }} />
    }
  >
    Jane
  </Chip>
);

import { Chip } from 'twenty-ui/primitives/data-display';

export const DocumentationChip = () => (
  <Chip
    variant="outline"
    shape="round"
    render={<a href="https://twenty.com/developers" />}
    clickable
  >
    Documentation
  </Chip>
);

import { Chip } from 'twenty-ui/primitives/data-display';

export const FileChip = () => (
  <Chip variant="soft" maxWidth={180} tooltipPlace="top">
    Quarterly customer research.pdf
  </Chip>
);