Avatar
Avatar
Section titled “Avatar”Avatar 24–64px. Shape: Circle or Rounded. Type: Image (pick a face via the Photo property), Initials, Icon. Optional status dot.
Variants: 36
| Property | Type / options |
|---|---|
| Status | boolean (off) |
| Initials | text |
| Icon swap | instance swap (icon) |
| Size | xs · sm · md · lg · xl · 2xl |
| Type | Image · Initials · Icon |
| Shape | Circle · Rounded |
Do
- Pick a face with the Photo property or drop an image into the Avatar photo instance.
- Use Initials when there is no photo.
- Use the Status dot only for live presence.
Don’t
- Don’t stretch photos — size comes from the Size variant.
- Don’t mix Circle and Rounded shapes in one list.
- Don’t use avatars as decoration without a name nearby.
Avatar photo
Section titled “Avatar photo”Stock avatar photos. Pick one via the Photo property on Avatar, or drop your own image into an instance.
Variants: 22
| Property | Type / options |
|---|---|
| Face | M01–M12 · F01–F10 |
Avatar group
Section titled “Avatar group”Stacked avatars with overflow count.
Variants: 3
| Property | Type / options |
|---|---|
| Size | xs · sm · md |
Avatar label group
Section titled “Avatar label group”Avatar with name and email — for tables, nav and comments.
Variants: 2
| Property | Type / options |
|---|---|
| Name | text |
| Supporting text | text |
| Size | sm · md |