Avatar

An image element with a fallback for representing the user.

JD

Default

JD

Fallback

JS

Extra Small

JS

Small

MJ

Large

SW

Extra Large

DB

2XL

ED

3XL

JD

Primary Border

JS

Success Border

MJ

Warning Border

SW

Error Border

DB

Info Border

ED

No Border

AB

Primary Fallback

CD

Success Fallback

EF

Warning Fallback

GH

Error Fallback

IJ

Info Fallback

KL

Muted Fallback

JD

Online Status

JS

Away Status

MJ

Busy Status

SW

Offline Status

DB

Large Online

ED

XL Busy

JDJSMJ

Small Group

JDJSMJSW

Team Group

JDJSMJSWDB

Large Group

JDJSMJ+5

Group with Overflow

JDJS+10

Many Users

JD

John Doe

Product Designer

Last seen 2 minutes ago

Profile Header

JS
Jane Smith2:34 PM

Hey team! Just finished the new component designs. Ready for review 🎨

Chat Message

Project Team

6 members
JD
JS
MJ
+3

Team Collaboration

Leadership Team

JD

John Doe

CEO

JS

Jane Smith

CTO

MJ

Mike Johnson

Design Lead

Company Leaders

DBliked your post

Small Notification

JD

John Doe updated the design system

5 minutes ago

JS

Jane Smith added new components

1 hour ago

Activity Feed

JD
John Doejust now

Great work on the new avatar component! The status indicators are perfect.

JSMJ
and 3 others reacted

Comment Thread