Avatar

People and workspaces, 24 to 64px, with initials fallback and status.

KSMPIGNLORA

AvatarLive · light and dark follow the theme switch

Usage

import { Avatar } from '@stanvision/atomus-react';

<Avatar name="Kristina Stan" src={photo} size="md" status="online" />

Shows a person or workspace. Falls back to initials, then to a user icon.

Provide

• name — used for initials, tooltip and accessible name.
• src (Figma: Type=Image), initials (Figma: Initials), icon (Figma: Icon swap).
• size xs 24 · sm 32 · md 40 · lg 48 · xl 56 · 2xl 64; shape circle · rounded; status online · away · offline.

Don’t

• Don’t use stock faces as placeholders — use initials.

In Figma

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.