Avatar

import { Avatar } from 'twenty-ui/primitives/data-display';

type PersonAvatarProps = { name: string; imageUrl?: string | null };

export const PersonAvatar = ({ name, imageUrl }: PersonAvatarProps) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
    <Avatar src={imageUrl} name={name} shape="circle" size="lg" />
    {name}
  </span>
);

import { IconUser } from 'twenty-ui/icon';
import { Avatar } from 'twenty-ui/primitives/data-display';

export const ContactIcon = () => (
  <Avatar
    icon={<IconUser />}
    shape="rounded-square"
    size="xl"
    role="img"
    aria-label="Contact"
  />
);

import { Avatar } from 'twenty-ui/primitives/data-display';

type ProfileAvatarProps = { onOpenProfile: () => void };

export const ProfileAvatar = ({ onOpenProfile }: ProfileAvatarProps) => (
  <Avatar
    name="Jane"
    shape="circle"
    size="lg"
    aria-label="Open Jane's profile"
    onClick={onOpenProfile}
  />
);