> ## 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
> Represent a person or record with an image, initial, or icon.
export const StoryEmbed = ({storyId, title, height = 240}) => <>
Open in Storybook
;
`Avatar` shows an image with a first-letter fallback. Use it beside a record name or inside a [Chip](/ui/primitives/data-display/chip).
## Image and fallback
```tsx theme={null}
import { Avatar } from 'twenty-ui/primitives/data-display';
type PersonAvatarProps = { name: string; imageUrl?: string | null };
export const PersonAvatar = ({ name, imageUrl }: PersonAvatarProps) => (
{name}
);
```
When the image is absent or fails to load, the fallback shows the first letter of the trimmed name in uppercase. An empty name shows `-`. `colorSeed` chooses stable fallback colors and defaults to `name`; use a record identifier to keep the color stable when the name changes.
The image and fallback are decorative. Keep the visible name beside the avatar, as above. For a standalone avatar that conveys information, supply `role="img"` and an `aria-label`.
## Shape and appearance
`shape` accepts `square`, `rounded-square`, or `circle`. Sizes run from `xs` (12px) to `xl` (40px); `md` is 16px. `variant="outline"` adds a border to the fallback. The `color`, `backgroundColor`, and `borderColor` overrides customize the fallback, while a loaded image keeps its original appearance.
```tsx theme={null}
import { IconUser } from 'twenty-ui/icon';
import { Avatar } from 'twenty-ui/primitives/data-display';
export const ContactIcon = () => (
}
shape="rounded-square"
size="xl"
role="img"
aria-label="Contact"
/>
);
```
An `icon` takes precedence over both the image and the first-letter fallback. `pulsing` animates opacity and respects reduced-motion preferences.
## Open a profile
```tsx theme={null}
import { Avatar } from 'twenty-ui/primitives/data-display';
type ProfileAvatarProps = { onOpenProfile: () => void };
export const ProfileAvatar = ({ onOpenProfile }: ProfileAvatarProps) => (
);
```
Supplying `onClick` renders a button with pointer, Enter, and Space activation. Use `disabled` to prevent activation. The default accessible name comes from `name`, but an action-specific `aria-label` makes the purpose clearer. When replacing the button through `render`, set `nativeButton={false}` for a non-button element.
## Props
Types and defaults are generated from the public component types. Native attributes and event handlers are also accepted.
Background color override for a first-letter fallback.
Border color override for the outline fallback.
CSS class applied to the element, or a function that
returns a class based on the component's state.
Text color override for a first-letter fallback.
Stable value used to choose fallback colors. Defaults to `name`.
Applies disabled styling and disables activation when `onClick` is supplied.
Icon rendered instead of the image and first-letter fallback.
Name used for the first-letter fallback and the default accessible name when clickable.
Set to `false` when a clickable avatar uses `render` with an element other than a native button.
Animates the avatar opacity. Respects reduced-motion preferences.
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.
Shape of the avatar and its fallback.
Avatar size: `xs` (12px), `sm` (14px), `md` (16px), `lg` (24px), or `xl` (40px).
Image URL. A missing or failed image shows the fallback.
Style applied to the element, or a function that
returns a style object based on the component's state.
Visual treatment of the fallback.