> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Chip
> Show compact caller-owned content with optional leading and trailing slots.
export const StoryEmbed = ({storyId, title, height = 120}) => <>
Open in Storybook
;
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.
## Usage
```tsx theme={null}
import { Avatar, Chip } from 'twenty-ui/primitives/data-display';
export const AssigneeChip = () => (
}
>
Jane
);
```
Children accept text or nodes. `startElement` and `endElement` accept avatars, icons, or other content. `endElementDivider` adds a separator before the trailing content. The default chip is a `div`; its slots can contain a separate action while the chip itself remains presentational.
Chip never inserts a label. Supply a translated fallback from your application when needed. Omit children for content made entirely from slots. An interactive chip with only an icon needs a caller-supplied accessible name.
## Appearance
`size` accepts `sm` or `md`. `variant` accepts `ghost`, `soft`, `solid`, or `plain`; `ghost` is the default. Plain chips have no resting fill or leading padding. Clickable plain chips retain the ghost hover and pressed backgrounds, pointer cursor, and focus ring. Use `shape="round"` for a pill, `weight="medium"` for emphasis, and `color="secondary"` for secondary text.
## Buttons and links
```tsx theme={null}
import { Avatar, Chip } from 'twenty-ui/primitives/data-display';
type AssigneeActionProps = {
onOpenAssignee: () => void;
disabled?: boolean;
};
export const AssigneeAction = ({
onOpenAssignee,
disabled,
}: AssigneeActionProps) => (
}
onClick={onOpenAssignee}
aria-label="Open Jane's record"
startElement={
}
>
Jane
);
```
Supplying `onClick` keeps the default `div`. Use `render` to compose an explicit native button, anchor, router link, or another appropriate owner. Native attributes, handlers, styles and the root ref reach that owner. A native button supplies keyboard activation and disabled behavior. Chip recognizes native disabled state and `aria-disabled` for appearance; `aria-disabled` alone does not prevent activation.
`clickable` controls hover and pointer appearance and defaults to whether `onClick` is supplied. Set it explicitly for a link without a click handler. Do not nest buttons or links inside a chip that is itself interactive.
```tsx theme={null}
import { Chip } from 'twenty-ui/primitives/data-display';
export const DocumentationChip = () => (
} clickable>
Documentation
);
```
URL text remains plain text. Intentional links belong in caller content or in the explicit root composition.
## Truncation and tooltips
```tsx theme={null}
import { Chip } from 'twenty-ui/primitives/data-display';
export const FileChip = () => (
Quarterly customer research.pdf
);
```
`maxWidth` constrains the rendered chip width in pixels, including padding. The same limit applies to plain chips with asymmetric padding. Content truncates with an ellipsis by default; `truncate={false}` leaves it unconstrained by truncation. String children supply their own tooltip text. Set `tooltipContent` for custom text or node content, `tooltipDelay` for the opening delay, and `isTooltipMultiline` to preserve line breaks. `alwaysShowTooltip` also enables the tooltip when content fits. These options follow [OverflowingTextWithTooltip](/ui/primitives/typography/overflowing-text-with-tooltip). Keep essential information available without relying on hover.
## Migration
Replace `emptyLabel` with caller-provided fallback children, and replace `forceEmptyText` or `isLabelHidden` with omitted children. Keep translated product fallbacks in the application. Replace `tooltipLabel` with `tooltipContent`. Move `disabled` to the explicit interactive owner and remove `nativeButton`. Add a native button or link through `render` wherever the chip previously relied on `onClick` to choose its element.
Replace leading-padding overrides with `variant="plain"`. Keep `clickable` enabled for native links and buttons that need hover and pressed feedback.
## Props
Types and defaults are generated from the public component types. Native attributes and event handlers are also accepted.
Shows the content tooltip even when the content is not truncated.
Caller-owned content. Missing or empty children add no fallback label.
Enables hover and pointer styling. Defaults to whether `onClick` is supplied; does not change the default div or add keyboard behavior.
Primary or secondary text color.
Content after the label. Avoid interactive content when the chip itself is a button or link.
Adds a divider before `endElement` when that slot has content.
Preserves line breaks in the tooltip text.
Maximum rendered chip width in pixels, including its leading and trailing padding.
Replaces the default div. Compose a native button or link explicitly; that owner supplies disabled and native interaction behavior.
Square or round corners.
Visual size of the chip.
Content before the label, such as an avatar or icon.
Tooltip text. Defaults to string children. Supply text explicitly for node content.
Delay in milliseconds before the tooltip opens.
Position of the content tooltip.
Truncates overflowing content with an ellipsis. Defaults to true.
Background treatment. Plain has no resting fill or leading padding, with ghost hover and pressed feedback when clickable.
Font weight of the content.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.