Needless UI

Components

Avatar

A person’s picture, or their initials on a color that is always theirs.

Import

import-avatar.ts
import { NuiAvatar, NuiAvatarGroup } from '@needless-ui/angular/avatar';

NuiAvatar

A picture or initials, named after the person.

Selector
[nuiAvatar]
NameTypeDefaultDescription
nameInputstringThe person’s name. The accessible name, the initials and the color come from it.
srcInputstringPicture URL. If it fails to load, the initials show instead.
sizeInput'sm' | 'md' | 'lg''md'Size: sm, md or lg.
shapeInput'circle' | 'square''circle'circle or square.
statusInput'online' | 'away' | 'busy' | 'offline'A presence dot: online, away, busy or offline.
labelInputstringAn accessible name that says more than the name, such as “Ada Lovelace, online”.
decorativeInputbooleanfalseHides the avatar from assistive technology, for avatars next to the visible name.

NuiAvatarGroup

A row of overlapping avatars. Name it with aria-label.

Selector
[nuiAvatarGroup]