AvatarGroup

import { Avatar, AvatarGroup } from '@bindshq/stance-react';

const people = [
  'Amara Okafor',
  'Lukas Novak',
  'Priya Raman',
  'Tomás Ferreira',
  'Hana Sato',
  'Oliver Grant',
];

export function Basic() {
  return (
    <AvatarGroup aria-label="Template editors">
      {people.slice(0, 4).map((n) => (
        <Avatar key={n} name={n} />
      ))}
    </AvatarGroup>
  );
}

import { Avatar, AvatarGroup } from '@bindshq/stance-react';

const people = [
  'Amara Okafor',
  'Lukas Novak',
  'Priya Raman',
  'Tomás Ferreira',
  'Hana Sato',
  'Oliver Grant',
];

export function Overflow() {
  return (
    <AvatarGroup
      aria-label="Sales team"
      max={3}
      total={48}
      overflowLabel={(n) => `${n} more team members`}
    >
      {people.map((n) => (
        <Avatar key={n} name={n} />
      ))}
    </AvatarGroup>
  );
}

import { Avatar, AvatarGroup } from '@bindshq/stance-react';

const people = [
  'Amara Okafor',
  'Lukas Novak',
  'Priya Raman',
  'Tomás Ferreira',
  'Hana Sato',
  'Oliver Grant',
];

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      {(['sm', 'md', 'lg'] as const).map((s) => (
        <AvatarGroup key={s} aria-label={`Signers ${s}`} size={s} max={4}>
          {people.map((n) => (
            <Avatar key={n} name={n} size={s} />
          ))}
        </AvatarGroup>
      ))}
    </div>
  );
}