Avatar

In plain words

A circle with someone’s initials, in their own color.

A circle with initials. index picks one of the theme’s collaborator (player) colors, so the same person keeps the same color; color sets it directly.

ui.avatar · Category: Display · Full reference →

Preview

Code

pz.row([
    ui.avatar("AL", index=0),
    ui.avatar("KV", index=1),
    ui.avatar("MZ", index=2, size=28),
    ui.avatar("JD", index=3, size=36),
], spacing=8, align="center")

When to use

• For the account in the title bar, comment authors or collaborators.
• For several people at once use Facepile.

Usage

import pyzed as pz
from pyzed import ui

pz.row([
    ui.avatar("AL", index=0),
    ui.avatar("KV", index=1),
    ui.avatar("MZ", index=2, size=28),
    ui.avatar("JD", index=3, size=36),
], spacing=8, align="center")

Variants

About these captures

Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site’s theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open Code under a capture to see the snippet that draws it; free names such as on_save stand for your own callbacks.

Collaborator color

index=0

Code

ui.avatar("AL", index=0)

index=1

Code

ui.avatar("KV", index=1)

index=2

Code

ui.avatar("MZ", index=2)

index=3

Code

ui.avatar("JD", index=3)

index=4

Code

ui.avatar("SR", index=4)

index=5

Code

ui.avatar("PB", index=5)

Size

size=18

Code

ui.avatar("KV", size=18)

size=22

Code

ui.avatar("KV", size=22)

size=32

Code

ui.avatar("KV", size=32)

size=48

Code

ui.avatar("KV", size=48)

Color

color="#c678dd"

Code

ui.avatar("PZ", color="#c678dd", size=32)

color="#e5c07b"

Code

ui.avatar("UI", color="#e5c07b", size=32)

States and events

image= shows a picture instead of the initials and tooltip= names the person on hover.

status="online"

Code

ui.avatar("KK", status="online", size=32)

status="away"

Code

ui.avatar("AL", status="away", index=2, size=32)

status="busy"

Code

ui.avatar("MZ", status="busy", index=4, size=32)

Events

Avatar has no events of its own: it shows what you give it. Like every widget it also has the 18 common events (click, double_click, right_click, mouse_enter, drag, key_down, resize…), attached with .on(...): see Events and Events of every component.

Properties and API

ui.avatar

avatar(
    initials,
    *,
    color=None,
    size=22,
    index=0,
    image=None,
    status=None,
    tooltip=None,
    theme=None,
)

A round avatar with initials.

Property	Default	Description
initials	required	Initials (the first two are used).
color	None	Background color.
size	22	Diameter.
index	0	Picks a collaborator color from the theme (theme.players).
image	None	A picture (path or bytes) instead of the initials.
status	None	Presence dot: "online", "away", "busy", "offline" or a color.
tooltip	None	Text shown on hover (the person’s name).
theme	None	Theme to use instead of the current one (pyzed.theme.current()).

Full reference →

Related

FacepileOverlapping collaborator avatars with +N.

Title barThe top bar with project and branch pickers.