Avatar

Show a person or entity with a photo, icon, initials, or slotted content.

Examples

Property	Attribute	Description	Type name	Type	Default
`avatarUrl`	`avatar-url`	Image URL; takes precedence over `src` when both are set.	`string \| undefined`	`string \| undefined`	`—`
`src`	`src`	Image URL.	`string \| undefined`	`string \| undefined`	`—`
`altText`	`alt-text`	Image alternative text; overrides `alt` when set.	`string \| undefined`	`string \| undefined`	`—`
`alt`	`alt`	Image alternative text (maps to `<img alt>`).	`string`	`string`	`""`
`initials`	`initials`	Text shown when there is no slot, image, or `icon`.	`string \| undefined`	`string \| undefined`	`—`
`label`	`label`	Accessible name for initials when distinct from visible initials.	`string \| undefined`	`string \| undefined`	`—`
`icon`	`icon`	Key from `@duo/icons` shown when image is absent or fails to load.	`IconName \| undefined`	`IconName \| undefined`	`—`
`size`	`size`	`xxs` through `xxl` (default `m`); see `MIGRATION.md` for pixel mapping.	`DuoAvatarSize`	`DuoIconSize`	`"m"`
`square`	`square`	When true, corners use small radius; omit or false for a circle or pill shape.	`boolean`	`boolean`	`false`
`outline`	`outline`	Muted border with transparent fill instead of filled surface.	`boolean`	`boolean`	`false`

Name	Description
`default`	Custom content (overrides image, icon, and initials when present).

Use Avatar to represent a user next to a name, in a list, or as a team or organization logo in a circular or rounded-square frame.

Provide alt-text (or alt) on images; use an empty string only when the image is purely decorative.
Use label or initials for icon and text fallbacks so screen readers get a name.
Pick a size that matches surrounding text (s–m in lists, l+ for profile emphasis).

Don’t use avatars for large illustrative imagery — use figure or image patterns instead.
Don’t use an avatar as the only control for an action — use Button or Icon with an accessible name.

Name	Purpose
`filled`	Default muted surface (`outline` omitted).
`outline`	Transparent fill with border (`outline` attribute).
`square`	Small radius corners; omit for a circular crop.

xxs through xxl scale the frame from 16×16px to 64×64px. Default is m (32×32px).