> ## 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.

# Avatar del asistente

> Un personaje estático de asistente con forma, expresión, color y tamaño configurables.

## Resumen

Renderiza un personaje de asistente a partir de una forma de cuerpo, cara, color de paleta y tamaño. El componente muestra los valores proporcionados; tu aplicación gestiona la selección y la persistencia.

> [tab] Light
>
> [Personaje de asistente junto a su nombre (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-assistantavatar--display\&viewMode=story\&globals=colorScheme:light)

> [tab] Dark
>
> [Personaje de asistente junto a su nombre (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-assistantavatar--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-data-display-assistantavatar--display)

## "Uso"

```tsx theme={null}
import { AssistantAvatar } from 'twenty-ui/components/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const AssistantLabel = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <AssistantAvatar shape="circle" face="default" color="blue" size={24} />
    <Text>Workspace assistant</Text>
  </Text>
);
```

## Opciones visuales

Elige formas independientemente de las expresiones y los colores.

| Propiedad | Valores | Predeterminado |
| - | - | - |
| `shape` | `circle`, `cookie`, `cloud`, `clover`, `flower`, `burst`, `pill`, `arch`, `gem`, `hexagon` | `circle` |
| `face` | `default`, `happy`, `wink`, `surprised`, `sleepy`, `love` | `predeterminado` |
| `color` | `blue`, `sky`, `turquoise`, `green`, `yellow`, `orange`, `red`, `pink`, `purple`, `gray` | `azul` |
| `tamaño` | `14`, `16`, `20`, `24`, `40` píxeles | `24` |

El cuerpo y la cara usan los tokens de tema de la paleta seleccionada y siguen el tema claro u oscuro circundante. Establece `size` para un personaje cuadrado. Los atributos nativos, los eventos, `className`, `style` y `ref` se aplican al span exterior; los estilos explícitos anulan sus dimensiones y los valores predeterminados de la paleta.

```tsx theme={null}
import { AssistantAvatar } from 'twenty-ui/components/data-display';

export const CustomAssistant = () => (
  <AssistantAvatar
    shape="cloud"
    face="happy"
    color="sky"
    size={40}
    aria-label="Workspace assistant"
  />
);
```

## Accesibilidad

El personaje es decorativo cuando no tiene un nombre accesible, como en el ejemplo de uso etiquetado. Para un personaje independiente, proporciona `aria-label` o `aria-labelledby`; la raíz expone entonces el rol de imagen. El cuerpo y la cara permanecen ocultos para la tecnología de asistencia para que el personaje se anuncie una sola vez.

Establece `aria-hidden` explícitamente cuando necesites anular el valor predeterminado basado en el nombre, por ejemplo, para ocultar un personaje con nombre junto a texto visible equivalente.

Coloca el personaje dentro de un botón o enlace con nombre cuando acompañe una acción. La aplicación gestiona el control, su etiqueta y su comportamiento.

## "Props"

**aria-hidden** `Booleanish`

Explicitly hides or exposes the character. Takes precedence over the name-based default.

**aria-label** `string`

Accessible name for a standalone character. Adds the image role; omit it beside a visible name.

**aria-labelledby** `string`

ID of an element naming a standalone character. Adds the image role.

**className** `string`

CSS class applied to the span root.

**color** `"blue" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "sky" | "turquoise" | "yellow"` (default: blue)

Theme palette used for the body and face. Follows the surrounding light or dark theme.

**face** `"default" | "happy" | "love" | "sleepy" | "surprised" | "wink"` (default: default)

Expression displayed over the body.

**isAnimated** `boolean` (default: false)

Plays the selected expression's idle loop. Displays the static expression when the browser prefers reduced motion.

**shape** `"arch" | "burst" | "circle" | "cloud" | "clover" | "cookie" | "flower" | "gem" | "hexagon" | "pill"` (default: circle)

Body shape of the assistant character.

**size** `14 | 16 | 20 | 24 | 40` (default: 24)

Width and height in pixels: 14, 16, 20, 24, or 40.

**style** `CSSProperties`

Inline styles applied to the root. Explicit styles override its dimensions and palette defaults.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.