# Avatar

> A round image with an initials fallback (Radix Avatar), 32px by default.

## Facts

- **Product**: Max
- **Family**: Data display
- **Global**: `window.DigitalCrew.Avatar`
- **Source**: `max-agent: src/components/ui/avatar.tsx`
- **Import in the app**: `import { Avatar } from "@/components/ui/avatar";`
- **Live preview**: /design/components/avatar/preview.html
- **Page**: /design/components/avatar

## Guidelines

**Use it for** people: teammates, attendees, stacked participant lists (overlap by 8px with a 2px `background` ring). Prospects use [**ProspectAvatar**](/design/components/prospect-avatar.md); Digital Workers use [**AgentFace**](/design/components/agent-face.md).

**What you provide**: `AvatarImage` (`src`, `alt` with the person's name) and `AvatarFallback` with one or two initials; size through `className`.

## API

```ts
declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): any;
declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): any;
declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): any;
export { Avatar, AvatarImage, AvatarFallback };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
var BLOB = { "max-carter": "/design/assets/Agents/max-carter.webp", "nora-hale": "/design/assets/Agents/nora-hale.webp" };
function App() {
  return h("div", { className: "flex items-center gap-4" },
    h(DC.Avatar, { className: "size-10" }, h(DC.AvatarImage, { src: BLOB["max-carter"], alt: "Max Carter", className: "object-cover" }), h(DC.AvatarFallback, null, "MC")),
    h(DC.Avatar, { className: "size-10" }, h(DC.AvatarImage, { src: BLOB["nora-hale"], alt: "Nora Hale", className: "object-cover" }), h(DC.AvatarFallback, null, "NH")),
    h(DC.Avatar, { className: "size-10" }, h(DC.AvatarFallback, null, "CD")),
    h("div", { className: "flex -space-x-2" }, ["AM", "JL", "TK", "+4"].map(function (t) { return h(DC.Avatar, { key: t, className: "size-8 ring-2 ring-background" }, h(DC.AvatarFallback, { className: "text-xs" }, t)); })));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Data display

- [AgentFace](/design/components/agent-face.md): A Digital Worker's face: its approved portrait, or its initials on its accent tile.
- [AnimateDigits](/design/components/animate-digits.md): A number whose digits spring in and out as it changes (motion), direction following the change.
- [CampaignStatusBadge](/design/components/campaign-status-badge.md): The campaign lifecycle pill: Draft, Active, Paused, Stopped, Completed, Archived.
- [ChannelBadge](/design/components/channel-badge.md): Marks which channel a conversation or step runs on: email (amber), LinkedIn (sky), WhatsApp (emerald).
- [EmailVerificationBadge](/design/components/email-verification-badge.md): The deliverability verdict for an email address, with an icon and an optional score.
- [HeroMetric](/design/components/hero-metric.md): One big number with its previous-period comparison, a trend pill and a pacing bar.
- [KpiCard](/design/components/kpi-card.md): A KPI tile — label, value, trend — and `KpiSection`, the glass panel that groups them.
- [MaxIconSet](/design/components/max-icon-set.md): Max's own SVG icons, exported as `DC.MaxIcons`: integration and channel logos, message delivery states, and the appearance-picker tiles.
- [MetricTile](/design/components/metric-tile.md): A compact glass tile for a scored metric: label, value toned by score band, hint.
- [ProspectAvatar](/design/components/prospect-avatar.md): A prospect's photo, or a gradient disc hashed from their name, with an optional unread halo.
- [Snippet](/design/components/snippet.md): A monospace command block with a copy button whose icon turns into a check after copying.
- [TimeLens](/design/components/time-lens.md): Max's agenda: hour marks, ticks and tasks in one scrolling column, read through a fixed lens that shows the time under it.
- [WorldGlobe](/design/components/world-globe.md): An interactive d3-geo globe on canvas with avatar markers that merge into heat-coloured count bubbles.