Tag

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

export const PriorityTag = () => <Tag color="red">Urgent</Tag>;

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

export const CategoryTags = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
    <Tag color="blue" variant="soft">
      Customer
    </Tag>
    <Tag color="green" variant="solid">
      Partner
    </Tag>
    <Tag color="orange" variant="outline">
      Prospect
    </Tag>
    <Tag color="transparent" variant="outline" borderStyle="dashed">
      Unassigned
    </Tag>
  </div>
);

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

type CategoryFilterProps = {
  selected: boolean;
  onToggle: () => void;
};

export const CategoryFilter = ({ selected, onToggle }: CategoryFilterProps) => (
  <Tag
    color="blue"
    variant={selected ? 'solid' : 'outline'}
    render={<button type="button" aria-pressed={selected} onClick={onToggle} />}
  >
    Customer
  </Tag>
);

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

export const FullCategoryLabel = () => (
  <Tag
    color="green"
    truncate={false}
    style={{ minWidth: 'fit-content', padding: 0 }}
  >
    Enterprise customer
  </Tag>
);