> ## 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 a compact record label with optional leading and trailing content.
export const StoryEmbed = ({storyId, title, height = 240}) => <>
Open in Storybook
;
Use `Chip` for compact references to people, records, or files. Use [Tag](/ui/components/data-display/tag) for colored categories and [Status](/ui/components/data-display/status) for workflow states.
## Record label
```tsx theme={null}
import { Avatar, Chip } from 'twenty-ui/primitives/data-display';
export const AssigneeChip = () => (
}
>
Jane
);
```
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 theme={null}
import { Avatar, Chip } from 'twenty-ui/primitives/data-display';
type AssigneeActionProps = { onOpenAssignee: () => void };
export const AssigneeAction = ({ onOpenAssignee }: AssigneeActionProps) => (
}
>
Jane
);
```
`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 theme={null}
import { Chip } from 'twenty-ui/primitives/data-display';
export const FileChip = () => (
Quarterly customer research.pdf
);
```
`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.
Shows the string-label tooltip even when the label is not truncated.
Enables hover and pointer styling. Defaults to whether `onClick` is supplied; does not add button semantics by itself.
Primary or secondary text color.
Applies disabled styling and disables activation when `onClick` is supplied.
Placeholder shown when children are missing, empty, or false, unless `forceEmptyText` is enabled.
Content after the label. Avoid interactive content when the chip itself is a button.
Adds a divider before `endElement` when that slot has content.
Suppresses the empty label when children are missing, empty, or false.
Hides the label while keeping the start and end elements. Supply an accessible name for an interactive chip.
Maximum chip width in pixels, used to constrain and truncate the label.
Set to `false` when a clickable chip uses `render` with an element other than a native button.
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
Square or round corners.
Visual size of the chip.
Content before the label, such as an avatar or icon.
Tooltip content for a string label. Defaults to the label text.
Position of the string-label tooltip.
Background treatment of the chip.
Font weight of the label.