ComponentsDisplay

Avatar

A person as a small picture — photo, initials or an icon — alone or in a stacked group.

Features10APIThemingAccessibility

Basic

A photo, initials from the name, or an icon when there is neither. The name is the accessible name and the title.

Initials

The colour comes from the name, so the same person always gets the same colour. tone sets one yourself.

Fallback

A photo that fails to load falls back to the initials; (imageError) reports it.

Loading the photo…

Sizes

small, medium, large, xlarge or a number of px; the text scales with the size.

Shapes

circle for people, square for teams, projects and apps.

Group

tx-avatar-group overlaps the avatars with a ring and shows max of them. +N is a button: it opens a popover that lists the hidden people with their photo or initials and name. addButton puts a dashed add button of the same size at the end — here "Invite" adds a person; txAvatarGroupEnd takes any other element there.

Tooltips

Inside a group every avatar shows the person's name in a tooltip on hover; [tooltips]="false" turns it off and leaves the native title. A single avatar gets the same tooltip with tooltip, and tooltipPlacement moves it.

Status

A status dot or a count through tx-overlay-badge with shape="circle".

3

Labels

label puts your own text instead of initials; icon and tone for non-people.

Design tokens

[dt] changes the avatar tokens — here a tighter group overlap and a thicker ring.

An Angular UI kit that feels finished. Open source under the MIT license.