Data

Avatar.

An image, with initials as a reliable fallback.

LIVE PREVIEWTry it. It works.
AMSLTK

Usage

React / TypeScript
<Avatar name="Alex Morgan" size="lg" />

Import components from @bld8/ui and include @bld8/ui/styles.css once. Wrap the application in UIProvider.

API & behaviour

name supplies both initials and the accessible label. Optional src falls back to initials on image errors. size: sm | md | lg.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.