Round user avatar. Renders a circular image from src, or a fallback placeholder (a user icon by default) when no image is provided.
Use Avatar to show a person's profile picture, with a graceful fallback when the picture is missing. It is a fixed-size circle (2.5rem) built for user identity, not a general-purpose image — for content images with responsive sources and resizer support use RasterImage.
There is no @uxf/form twin — Avatar is a display primitive, not a form field.
import { Avatar } from "@uxf/ui/avatar";
// with image
<Avatar src="https://example.com/user.jpg" />
// no image -> default placeholder (user icon)
<Avatar />
// custom placeholder
<Avatar placeholder={<span>JH</span>} />
Extends HTMLAttributes<HTMLDivElement>, so all standard <div> attributes (className, onClick, id, …) are accepted. Forwards its ref to the wrapper <div>.
| Prop | Type | Default | Description |
|---|---|---|---|
src |
string |
— | Image URL. When set, rendered as a cover-fit <img> filling the circle. |
placeholder |
ReactNode |
<Icon name="user" size={16} /> |
Content shown when src is not provided. |
The rendered <img> always has an empty alt="" (decorative); convey identity through surrounding markup.
Import the component stylesheet once in your global CSS. The default placeholder renders an Icon, so its stylesheet is required too:
@import url("@uxf/ui/css/icon.css");
@import url("@uxf/ui/css/avatar.css");
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.