OverflowingList

import { OverflowingList, Section } from 'twenty-ui/components/layout';
import { Tag } from 'twenty-ui/primitives/data-display';

const TAGS = ['Customer', 'Partner', 'Priority', 'Renewal'];

export const CompanyTags = () => (
  <Section.Root>
    <Section.Header
      title="Company tags"
      description="Open the count to see all tags."
    />
    <OverflowingList
      style={{ width: 180 }}
      showOverflowCount
      overflowLabel="Show all company tags"
    >
      {TAGS.map((label) => (
        <Tag
          key={label}
          color="blue"
          truncate={false}
          style={{ width: 80, minWidth: 'fit-content' }}
        >
          {label}
        </Tag>
      ))}
    </OverflowingList>
  </Section.Root>
);

import { useState } from 'react';
import { OverflowingList } from 'twenty-ui/components/layout';
import { Tag } from 'twenty-ui/primitives/data-display';
import { Button } from 'twenty-ui/primitives/input';

const TEAMS = ['Design', 'Engineering', 'Support', 'Operations'];

export const ControlledTeamList = () => {
  const [open, setOpen] = useState(false);

  return (
    <OverflowingList
      open={open}
      onOpenChange={setOpen}
      showOverflowCount
      overflowLabel="Show all teams"
      style={{ width: 220 }}
      triggerProps={{ render: <Button variant="outline" size="sm" /> }}
    >
      {TEAMS.map((team) => (
        <Tag key={team} color="blue">
          {team}
        </Tag>
      ))}
    </OverflowingList>
  );
};