upstream-twenty/packages/twenty-docs/ui/primitives/data-display/chip.mdx

---
title: Chip
description: Show a compact record label with optional leading and trailing content.
---

import { StoryEmbed } from '/snippets/ui/StoryEmbed.mdx';

import ChipReference from '/snippets/ui/generated/data-display/chip.mdx';

Use `Chip` for compact references to people, records, or files. Use [Tag](/ui/primitives/data-display/tag) for colored categories and [Status](/ui/primitives/data-display/status) for workflow states.

<StoryEmbed
  storyId="ui-data-display-chip--with-left-avatar"
  title="Chip example"
/>

## Record label

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

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

Use `startElement` and `endElement` for avatars, icons, or other content. `endElementDivider` adds a separator before the trailing content. The default chip is a `div`; its slots can contain an action when the chip itself is not interactive.

## Open a record

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

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

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

`onClick` renders a button with keyboard activation. `clickable` controls hover and pointer styling only; setting it alone does not create a button or add an action. `disabled` prevents activation of the button. Do not nest buttons or links inside an interactive chip.

Use `render` to replace the root element. If an `onClick` chip renders a non-button element, set `nativeButton={false}`. When `isLabelHidden` hides the label, give an interactive chip an `aria-label`.

## Width and empty labels

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

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

`maxWidth` constrains the chip in pixels. String labels truncate and show their full text in a tooltip on hover. `tooltipLabel` changes the tooltip text; `alwaysShowTooltip` also enables it when the label fits. Keep essential information available without relying on hover.

Missing, empty-string, or `false` children show `emptyLabel`, which defaults to `Untitled`. `forceEmptyText` suppresses that placeholder. `isLabelHidden` hides both the content label and the placeholder while preserving the slots.

## Appearance

`size` accepts `sm` or `md`. `variant` accepts `ghost`, `soft`, or `solid`; `ghost` is the default. Use `shape="round"` for a pill, `weight="medium"` for emphasis, and `color="secondary"` for secondary text.

## Props

Types and defaults are generated from the public component types. Native attributes and event handlers are also accepted.

<ChipReference />