Avatar

A person, team or bot, shown as a photo, initials or an icon, with an optional status, badge and count. Specification: docs/components/avatar.md · count: docs/components/count.md

Type × size

The type comes from the content: a photo, initials, or an empty fallback, which shows an icon. Sizes xs to 2xl, then without data-size.

Photo

AL AL AL AL AL AL AL

Initials

AL AL AL AL AL AL AL

Icon (empty fallback)

Color from a seed

Pass a stable number from your app (a user id) as data-seed: it always picks the same color. Without a seed the avatar is neutral.

AL GH AT KJ LT MH DR BL KT RP TB FA DK HL JB SG ED NS

Status

A dot cut into the edge. Its text is for screen readers only.

AL Online AL Away AL Busy AL Offline GH Online GH Away GH Busy GH Offline
AL Online AL Online AL Online AL Online AL Online AL Online

Badge and count

A badge (bottom-end) holds an icon and its meaning; a canon-count sits top-end. Each is cut into the avatar.

Badge

AL Verified AL Verified AL Verified AL Verified AL Verified AL Verified
GH Verified GH Verified GH Verified GH Verified

Count

AL 3 unread AL 3 unread AL 3 unread AL 3 unread AL 3 unread AL 3 unread
AL 3 unread AL 12 unread AL 99+ unread

Together

AL 3 unread Online AL Verified AT 3 unread Verified

Kind

data-kind: person (the default), team or bot. Teams and bots get their own shape and icon.

DT DB Online AC 5 unread

Clickable

A link to a profile, a button that opens the account menu. Tab to see the focus ring.

AL

Spotlight

data-spotlight on an avatar: under the pointer or with focus it grows a little and shows its name in a Tooltip; it takes focus so keyboards reach it. For several avatars, put it on the Avatar Group. For more than the name, point the avatar at your own Tooltip with interestfor.

AL Online GH

Fallback

A photo that doesn't load shows the initials (canon.js), or the icon when there are none.

GH AT Away

Beside the name

When the name is written next to it, the avatar is decorative: the fallback is aria-hidden with no label.

Ada Lovelace Grace Hopper

Edge cases

On other surfaces

The cut-outs are real gaps: the surface shows through.

AL 3 unread Online GH Verified

Right-to-left

Status, badge and count move to the other side.

AL 3 unread Online أ Verified