data · Normal DOM + Twenty Remote DOM

EntityChip

Colour-coded letter avatar + name — the visual handle for one record.

The default avatar is the first letter of the name painted from a stable hash → palette, so the same record always reads the same colour. Three interaction modes: read-only, clickable (opens a picker), or removable (small × at the right edge).

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { EntityChip } from '@8maverik8/twenty-design';

Examples

Read-only

Creomate · Bundle (WebAPI + Webhook) · 32 SC
OAPPS 3CX for Zendesk · Professional
Advanced Export
tsx
<EntityChip name="Creomate · Bundle (WebAPI + Webhook) · 32 SC" />

Clickable (opens a picker)

OAPPS 3CX for Zendesk · Professional
tsx
<EntityChip name="OAPPS 3CX for Zendesk · Professional" onClick={openPicker} />

Removable

Premium Implementation
×
tsx
<EntityChip name="Premium Implementation" onRemove={() => unlink()} />

Guidelines

✓
Use it inline as a button to open a record picker.Pair with RecordPicker for the canonical 'change selected record' flow.
✕
Pile multiple onto a single line when names are long — they ellipsis-truncate.The chip is for inline display, not a multi-select. Use Tag for multi-value display.