Avatar

A person's photo in a circle, or their initials.

import { Avatar } from "@etched/reticle/avatar";

// A stand-in photo, so the page needs no network.
const photo = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#c3eac9"/><circle cx="32" cy="26" r="12" fill="#194f29"/><rect x="12" y="42" width="40" height="30" rx="20" fill="#194f29"/></svg>',
)}`;

export function Preview() {
  return (
    <div className="row">
      <Avatar name="Ana Ruiz" size="lg" />
      <Avatar name="Lee Park" src={photo} size="lg" />
      <Avatar name="José Núñez" size="lg" />
    </div>
  );
}

Installation

import { Avatar } from "@etched/reticle/avatar";

Examples

Initials

import { Avatar, type AvatarSize } from "@etched/reticle/avatar";

const sizes: AvatarSize[] = ["xs", "sm", "base", "lg"];

export function Initials() {
  return (
    <div className="row">
      {sizes.map((size) => (
        <Avatar key={size} name="Ana Ruiz" size={size} />
      ))}
    </div>
  );
}

Photo

import { Avatar, type AvatarSize } from "@etched/reticle/avatar";

const sizes: AvatarSize[] = ["xs", "sm", "base", "lg"];

// A stand-in photo, so the page needs no network.
const photo = `data:image/svg+xml,${encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#c3eac9"/><circle cx="32" cy="26" r="12" fill="#194f29"/><rect x="12" y="42" width="40" height="30" rx="20" fill="#194f29"/></svg>',
)}`;

export function Photo() {
  return (
    <div className="row">
      {sizes.map((size) => (
        <Avatar key={size} name="Lee Park" src={photo} size={size} />
      ))}
    </div>
  );
}

A photo that fails shows the initials

import { Avatar } from "@etched/reticle/avatar";

export function APhotoThatFailsShowsTheInitials() {
  return (
    <div className="row">
      <Avatar name="José Núñez" src="data:image/png;base64,broken" />
    </div>
  );
}

Beside the name: alt="" so the name is read once

Mira Osei

import { Avatar } from "@etched/reticle/avatar";

export function BesideTheNameAltSoTheNameIsReadOnce() {
  return (
    <div className="row">
      <Avatar name="Mira Osei" alt="" size="sm" />
      <span>Mira Osei</span>
    </div>
  );
}

API reference

Prop	Type	Default	Description
name *	string	–	The person's name. It names the avatar, and its first two words give the initials.
src	string	–	Photo URL. Until it loads, or when it fails, the initials show.
size	"xs" \| "sm" \| "base" \| "lg"	"base"
alt	string	name	`""` when the name is already beside the avatar, so screen readers do not read it twice.
className	string	–