{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \ \ /\ / / _ \ '_ \| __| | | | 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="backgroundColor" type="string">
  Background color override for a first-letter fallback.
</ParamField>

<ParamField body="borderColor" type="string">
  Border color override for the outline fallback.
</ParamField>

<ParamField body="className" type="string | ((state: AvatarRootState) =&gt; string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="color" type="string">
  Text color override for a first-letter fallback.
</ParamField>

<ParamField body="colorSeed" type="string">
  Stable value used to choose fallback colors. Defaults to `name`.
</ParamField>

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

<ParamField body="icon" type="ReactNode">
  Icon rendered instead of the image and first-letter fallback.
</ParamField>

<ParamField body="name" type="string">
  Name used for the first-letter fallback and the default accessible name when clickable.
</ParamField>

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

<ParamField body="pulsing" type="boolean" default="false">
  Animates the avatar opacity. Respects reduced-motion preferences.
</ParamField>

<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, AvatarRootState&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;circle&quot; | &quot;square&quot; | &quot;rounded-square&quot;" default="square">
  Shape of the avatar and its fallback.
</ParamField>

<ParamField body="size" type="&quot;sm&quot; | &quot;md&quot; | &quot;lg&quot; | &quot;xl&quot; | &quot;xs&quot;" default="md">
  Avatar size: `xs` (12px), `sm` (14px), `md` (16px), `lg` (24px), or `xl` (40px).
</ParamField>

<ParamField body="src" type="string | null">
  Image URL. A missing or failed image shows the fallback.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: AvatarRootState) =&gt; CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="variant" type="&quot;outline&quot; | &quot;soft&quot;" default="soft">
  Visual treatment of the fallback.
</ParamField>