Astryx Avatar

Avatar represents a person or team with a profile photo, initials, or a default icon, from Meta's Astryx design system. Use it in comment headers, contact lists, chat messages, user cards, and anywhere you need to identify someone visually. Includes AvatarStatusDot and AvatarGroup with overflow.

Astryxby

Meta

'use client';

import Avatar, {
  AvatarGroup,
  AvatarGroupOverflow,
} from '@/components/ui/astryx-avatar';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

const CDN = 'https://lookaside.facebook.com/assets/astryx';

const USERS = [
  {
    name: 'Ami Pena',
    src: `${CDN}/DATA-Ami-Pena.png`,
  },
  {
    name: 'Drew Young',
    src: `${CDN}/DATA-Drew-Young.png`,
  },
  {
    name: 'Gabriela Fernandez',
    src: `${CDN}/DATA-Gabriela-Fernandez.png`,
  },
  {
    name: 'Jihoo Song',
    src: `${CDN}/DATA-Jihoo-Song.png`,
  },
  {
    name: 'Nam Tran',
    src: `${CDN}/DATA-Nam-Tran.png`,
  },
];

export default function AvatarGroupBlock() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={8}>
          <Stack direction="vertical" gap={3}>
            <Text type="supporting" color="secondary">
              Team members
            </Text>
            <AvatarGroup size="medium">
              {USERS.map(user => (
                <Avatar key={user.name} src={user.src} name={user.name} />
              ))}
              <AvatarGroupOverflow count={3} />
            </AvatarGroup>
          </Stack>
          <Stack direction="vertical" gap={3}>
            <Text type="supporting" color="secondary">
              Larger group
            </Text>
            <AvatarGroup size="medium">
              {USERS.slice(0, 3).map(user => (
                <Avatar key={user.name} src={user.src} name={user.name} />
              ))}
              <AvatarGroupOverflow count={8} />
            </AvatarGroup>
          </Stack>
        </Stack>
      </div>
    </Theme>
  );
}