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

{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
 *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
 *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
 *                              |___/
 *
 * This file is generated from the documentation data in packages/twenty-ui/generated.
 * To update it, edit the component prop types or design tokens in twenty-ui and run:
 *   npx nx generate:ui twenty-docs
 */}

<ParamField body="alwaysShowTooltip" type="boolean" default="false">
  Shows the string-label tooltip even when the label is not truncated.
</ParamField>

<ParamField body="clickable" type="boolean" default="isDefined(onClick)">
  Enables hover and pointer styling. Defaults to whether `onClick` is supplied; does not add button semantics by itself.
</ParamField>

<ParamField body="color" type="&quot;primary&quot; | &quot;secondary&quot;" default="primary">
  Primary or secondary text color.
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Applies disabled styling and disables activation when `onClick` is supplied.
</ParamField>

<ParamField body="emptyLabel" type="string" default="Untitled">
  Placeholder shown when children are missing, empty, or false, unless `forceEmptyText` is enabled.
</ParamField>

<ParamField body="endElement" type="ReactNode">
  Content after the label. Avoid interactive content when the chip itself is a button.
</ParamField>

<ParamField body="endElementDivider" type="boolean" default="false">
  Adds a divider before `endElement` when that slot has content.
</ParamField>

<ParamField body="forceEmptyText" type="boolean" default="false">
  Suppresses the empty label when children are missing, empty, or false.
</ParamField>

<ParamField body="isLabelHidden" type="boolean" default="false">
  Hides the label while keeping the start and end elements. Supply an accessible name for an interactive chip.
</ParamField>

<ParamField body="maxWidth" type="number">
  Maximum chip width in pixels, used to constrain and truncate the label.
</ParamField>

<ParamField body="nativeButton" type="boolean" default="true">
  Set to `false` when a clickable chip uses `render` with an element other than a native button.
</ParamField>

<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, {}&gt;">
  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.
</ParamField>

<ParamField body="shape" type="&quot;square&quot; | &quot;round&quot;" default="square">
  Square or round corners.
</ParamField>

<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot;" default="sm">
  Visual size of the chip.
</ParamField>

<ParamField body="startElement" type="ReactNode">
  Content before the label, such as an avatar or icon.
</ParamField>

<ParamField body="tooltipLabel" type="string">
  Tooltip content for a string label. Defaults to the label text.
</ParamField>

<ParamField body="tooltipPlace" type="&quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot;">
  Position of the string-label tooltip.
</ParamField>

<ParamField body="variant" type="&quot;solid&quot; | &quot;ghost&quot; | &quot;soft&quot;" default="ghost">
  Background treatment of the chip.
</ParamField>

<ParamField body="weight" type="&quot;regular&quot; | &quot;medium&quot;" default="regular">
  Font weight of the label.
</ParamField>