Avatar

A compact identity tile with a stable fallback while an image loads or fails.

Interactive preview

Live specimenTry the component

Initials remain visible if an image is missing or fails.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add avatar

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Avatar alt="Alex Morgan" src="/alex.jpg" fallback="AM" size="md" />

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`alt`	`string`	`required`
`src`	`string`	`—`
`fallback`	`ReactNode`	`initials from alt`
`size`	`sm \| md \| lg`	`md`

Accessibility

The root span exposes one image name through alt. The nested image and fallback are decorative to avoid duplicate names. Missing, loading, or failed images show the fallback. Changing src allows another load attempt; changing alt updates the name. Ref targets the span, not the image. Place an Avatar inside a named link or button when the identity is interactive.