# Avatar

> A person's or entity's picture rendered as a fixed-size, fully circular host stacking an image layer, an initials fallback, and an optional corner status badge, plus a way to overlap several instances into one group with a trailing overflow count.

```ts
import { Avatar } from "@sdxc/ui";
```

Renders a fixed-size, fully circular picture host sized through the
`data-size` attribute contract (`"sm"`, `"md"`, or `"lg"`), stacking
whichever image, fallback, and badge parts a consumer composes as children.

## Examples

```tsx
<Avatar>
	<Avatar.Image src={user.avatarUrl} alt={user.name} />
	<Avatar.Fallback>{initials}</Avatar.Fallback>
</Avatar>
```

```tsx
<Avatar size="lg">
	<Avatar.Image src={user.avatarUrl} alt={user.name} />
	<Avatar.Fallback>{initials}</Avatar.Fallback>
	<Avatar.Badge aria-label={t("status.online")} />
</Avatar>
```

## Props

Also accepts everything in `Omit<ImagePlaceholder.Props, "shape">`.