Skip to content
DOL Studio

Avatar, User

Design: Stable Code: Coded identityuser 21 Figma sets 4 standalone User card/General

Live preview

Sizes

5 sizes — xs / sm / md / lg / xl. Initials scale proportionally with avatar diameter.
xs
sm
md
lg
xl

Letter placeholder

DOL default — neutral slate (soft style, consistent with Tag/Badge tone). First 1-2 letters extracted from `name` prop.
Khoa Anh
Dương Ổi
Mai Ngọc
Hà Linh
Tuấn Sơn
Quỳnh Mai

Explicit tone

Opt-in tones — brand / info / success / warning / danger / neutral. Use when avatars need semantic role coloring (admin / instructor / student / etc.).
brand
info
success
warning
danger
neutral

Status dots

Presence indicator with white ring separator — online / offline / busy / away.
online
offline
busy
away

Blank + square variants

No `name` → person icon placeholder. `shape=square` extension for non-user contexts (organization, team, brand mark).
blank · md
blank · lg
blank · xl
square · md
square · lg
square · brand

Import & files

Import
import { Avatar, User } from "@dol/ui/avatar";
Source file
packages/@dol/ui/src/avatar/Avatar.tsx

Figma source

Figma source 21 sets
Page
Avatar, User
Sets
21 + 4 standalone
Primary set
User card/General · 31 variants Open in Figma →
Showing: User card/General
11 other sets (+ 9 more not listed)
  • Avatar/Multi avatar display 96 variants Figma →
  • Badge item/Dạy thay status 3 variants Figma →
  • Badge item/Leaderboard 140 variants Figma →
  • Badge item/Myself, me, self, your class 3 variants Figma →
  • Img lib/Avatar/3D Avatar 56 variants Figma →
  • Img lib/Avatar/3D cartoon Job 56 variants Figma →
  • Img lib/Avatar/3D chibi animal 56 variants Figma →
  • Img lib/Avatar/Cartoon animal 1 variants Figma →
  • Img lib/Avatar/Character Exercise 9 variants Figma →
  • Img lib/Avatar/Cinematic Portrait 46 variants Figma →
  • Img lib/Avatar/DOL Junior Character 41 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Avatar, User
Slug: `avatar-user`
Domain: general · Category: display
Design: stable · Code: coded


## Description
User avatar primitives - 21 sets across edit button, multi-avatar display, status badges (e.g., "Dạy thay" assignment indicators).


## Import
```ts
import { Avatar, User } from "@dol/ui/avatar";
```
Source: `packages/@dol/ui/src/avatar/Avatar.tsx`


## Figma source
Page: Avatar, User
Sets: 21
Primary: User card/General
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=8031-86799

Related

  • DOL English logo

    Logo

    Coded
  • DOL Academy logo

    Program logo

    Design only

  • KidAvatar

    KIDCoded
  • Tag label

    Tag

    Coded
  • Field
    Value
    Name
    DOL Edu

    Table

    Coded

  • Divider

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).