Actions and display

Avatar

Avatar — user/entity image with initials fallback and optional presence dot. Renders the image when `src` is set, otherwise initials derived from `name`. `name` is always the accessible label (image alt / initials aria-label), so an Avatar is never an unlabelled graphic.

Public export

typescript

import { Avatar } from '@happyvertical/smrt-ui/ui';

Import path: @happyvertical/smrt-ui/ui
Props: 5
Props described: 5 of 5
Bindable state: 0
Callback events: 0
Verified release: 0.44.0

Props

Also accepts Omit<HTMLAttributes<HTMLSpanElement>, 'class'>. The table lists the component-specific contract.

NameTypeRequiredDescription

srcstringNoImage URL. When absent, initials from `name` are shown.

namestringYesAccessible name; also the image alt and initials fallback source.

sizeAvatarSizeNoSize variant.

statusAvatarStatusNoOptional presence indicator.

classstringNoExtra class on the root.

Bindable state

This component has no bindable public state.

Callback events

This component declares no callback event props.

Public export

Props

Bindable state

Callback events

Examples and explanation