Avatar

Example

There are no profile pictures yet, so Avatar draws a circle with the first letter of the name. The ground is one of six brand colors, chosen by hashing seed (usually the user ID), so a person has the same color on every page. The light grey ground takes dark text and the others light text. The letter is 42% of the diameter.

import { Avatar } from '@iffday/web/src/kit';
import { people } from '../../../samples';

export default function Example() {
  return (
    <>
      {people.map((person, index) => (
        <Avatar
          key={person.id}
          name={person.name}
          seed={person.id}
          size={[22, 28, 34, 48][index]}
        />
      ))}
    </>
  );
}

Usage

• Pass seed rather than relying on the name: otherwise a new display name changes the color.
• The avatar is decoration and carries aria-hidden; write the name beside it, as reviews do.

Props