Avatar

import { Avatar } from "@arcadia/ui";

<Avatar name="Ada Lovelace" src="/avatars/ada.png" size="sm" />

Without an image an avatar is a monogram: the first letter of the first and the last word of the name, one letter at xs. Its tone is hashed from the name, one of blue, cyan, green, purple and pink, so a person keeps the same colour everywhere; never the beacon, yellow or red, which mean something else. The monogram also shows until an image has loaded, after a 300ms grace period so a fast image never flashes a letter first, and it stays if the image fails: Grace's image above is broken, and the row keeps its shape and colour. In a ListRow use xs, which fills the 20px leading slot exactly.

hue picks a tone instead of the hash (neutral is the quiet grey). rootStyle takes layout and these knobs: a size, and palette tokens for the monogram and its fill.

--avatar-size

Ref<Control | Space>Default var(--control-md)

Width and height.

--avatar-bg

PaintDefault color-mix(in oklab, var(--_avatar-tone) var(--avatar-tint), var(--bg-card))

The monogram's fill: the tone over the card, opaque, so it reads the same on any surface.

--avatar-fg

PaintDefault color-mix(in oklab, var(--_avatar-tone) 72%, var(--ink))

The monogram's ink: the tone pulled toward the theme's ink (4.5:1 or more on its fill).

The root is an img role named by name; the image and the monogram inside it are decorative, so a screen reader reads the person's name once whichever is showing. Every tone's ink clears 4.5:1 on its own fill in both themes.

Where the name is already written beside the avatar, as in the rows above, the reader hears it twice. That is usually fine for a list of people; for a dense list, wrap the avatar in an element with aria-hidden.