Avatar
A person's photo or initials. People are round. Companies are square and use Company logo.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { Avatar } from '@/ui/avatar';<Avatar name="Maya Chen" />Sizes
Four sizes: 16px (xsmall) only inside a record chip in Flo's text (Decided 11); 20px (small, the default) for table cells, record chips, menus and pickers; 24px (medium) for row lists, notes and the member menu; 32px (large) for record headers, hover previews and Settings members. Pick by the row around it, never by how important the person is.
import { Avatar } from '@/ui/avatar';
export default function AvatarSizes() {
return (
<div className="flex items-end gap-400">
<span className="flex items-center gap-050 text-body leading-body font-medium">
<Avatar name="Maya Chen" size="xsmall" />
Maya Chen
</span>
<span className="flex items-center gap-075 text-body-small leading-body-small font-medium">
<Avatar name="Maya Chen" size="small" />
Maya Chen
</span>
<span className="flex items-center gap-100 text-body leading-body font-medium">
<Avatar name="Maya Chen" size="medium" />
Maya Chen
</span>
<span className="flex items-center gap-150 text-heading-small leading-body font-semibold">
<Avatar name="Maya Chen" size="large" />
Maya Chen
</span>
</div>
);
}Photo
A member's own photo, cropped to fill and never stretched. A 1px inner hairline keeps light photos off the page. The initials show until the photo loads, and if it fails.
import { Avatar } from '@/ui/avatar';
export default function AvatarPhoto() {
return (
<span className="flex items-center gap-150 text-body font-medium">
<Avatar name="Maya Chen" src="/examples/maya-chen.svg" size="large" />
Maya Chen
</span>
);
}Initials
The first letters of the first and family name on the grey tile. Candidates and contacts always use these. Initials are grey for everyone: colour is not a name, so it never tells people apart. These two stand alone, so each carries the person's name for screen readers.
import { Avatar } from '@/ui/avatar';
export default function AvatarInitials() {
return (
<div className="flex items-center gap-100">
<Avatar name="Maya Chen" size="large" standalone />
<Avatar name="Daniel Okafor" size="large" standalone />
</div>
);
}No name yet
A person known only by email shows the user icon in subtle grey.
import { Avatar } from '@/ui/avatar';
export default function AvatarNoName() {
return (
<span className="flex items-center gap-150 text-body font-medium">
<Avatar name="d.okafor@halcyonbank.com" size="large" />
d.okafor@halcyonbank.com
</span>
);
}Interactive avatar
An avatar that opens something sits in a ghost icon button. The avatar never changes; the button around it takes hover, press, focus and disabled, and its label names the person and the action.
import { Avatar } from '@/ui/avatar';
import { IconButton } from '@/ui/button';
export default function AvatarInteractive() {
return (
<div className="flex items-center gap-100">
<IconButton label="Joseph Ariel, account menu" aria-haspopup="menu">
<Avatar name="Joseph Ariel" size="medium" />
</IconButton>
<IconButton label="Joseph Ariel, account menu" aria-haspopup="menu" disabled>
<Avatar name="Joseph Ariel" size="medium" />
</IconButton>
</div>
);
}