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

# AssistantAvatar

> Un personaj static de asistent cu formă, expresie, culoare și dimensiune configurabile.

## Prezentare generală

Redă un personaj de asistent dintr-o formă de corp, față, culoare din paletă și dimensiune. Componenta afișează valorile furnizate; aplicația ta gestionează selecția și persistența.

> [tab] Light
>
> [Personajul de asistent lângă numele său (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-assistantavatar--display\&viewMode=story\&globals=colorScheme:light)

> [tab] Dark
>
> [Personajul de asistent lângă numele său (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)

## Utilizare

```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>
);
```

## Opțiuni vizuale

Alege formele independent de expresii și culori.

| Proprietate | Valori | Implicit |
| - | - | - |
| `shape` | `circle`, `cookie`, `cloud`, `clover`, `flower`, `burst`, `pill`, `arch`, `gem`, `hexagon` | `circle` |
| `face` | `default`, `happy`, `wink`, `surprised`, `sleepy`, `love` | `implicit` |
| `culoare` | `blue`, `sky`, `turquoise`, `green`, `yellow`, `orange`, `red`, `pink`, `purple`, `gray` | `albastru` |
| `dimensiune` | `14`, `16`, `20`, `24`, `40` pixeli | `24` |

Corpul și fața folosesc tokenurile de temă ale paletei selectate și urmează tema luminoasă sau întunecată din jur. Setează `size` pentru un personaj pătrat. Atributele native, evenimentele, `className`, `style` și `ref` vizează elementul span exterior; stilurile explicite îi suprascriu dimensiunile și valorile implicite ale paletei.

```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"
  />
);
```

## Accesibilitate

Personajul este decorativ atunci când nu are un nume accesibil, ca în exemplul de utilizare etichetat. Pentru un personaj independent, furnizează `aria-label` sau `aria-labelledby`; elementul rădăcină expune apoi rolul de imagine. Corpul și fața rămân ascunse pentru tehnologiile de asistență, astfel încât personajul să fie anunțat o singură dată.

Setează explicit `aria-hidden` atunci când trebuie să suprascrii valoarea implicită bazată pe nume, cum ar fi ascunderea unui personaj cu nume lângă un text vizibil echivalent.

Plasează personajul într-un buton sau link cu nume atunci când însoțește o acțiune. Aplicația gestionează controlul, eticheta și comportamentul acestuia.

## Proprietăți

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