Avatar
An image or a small set of initials.
Usage
import { Avatar } from '@fwenthehunter/friendly-ui';
<Avatar alt="Ada Lovelace" />
<Avatar alt="Grace Hopper" fallback="GH" size="lg" />
<Avatar src="/avatar.jpg" alt="Your name" />Without src, derives initials from the first two words of alt, or uses your fallback content. The accessible name stays the full alt text. With src, renders an img; imageProps passes through attributes such as loading and decoding.
Supply alt="" for a decorative avatar next to an already visible name. A failed image uses the browser’s native alt behavior; automatic image-error fallback is not part of this server-compatible primitive.
Customize this component
- Choose a name.
- Add its CSS to your app’s theme.css, imported after the package styles.
- Pass the same name to the prop. No registration, provider, or package edits are needed. Built-in TypeScript suggestions remain available.
A custom name alone does not create styles: until its CSS is loaded, it inherits the component’s base appearance. The examples below are application styles, not additional package defaults.
Add a size
The same custom size works for both images and initials.
/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
.fui-avatar[data-size="xl"] {
width: 4rem;
height: 4rem;
font-size: 1.25rem;
}
}import { Avatar } from "@fwenthehunter/friendly-ui";
<Avatar size="xl" alt="Ada Lovelace" />Props
Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.
| Prop | Type | Default |
|---|---|---|
alt | string (required) | — |
src | string | — |
fallback | ReactNode | initials from alt |
size | sm | md | lg | custom string | md |
imageProps | native img props except src/alt | — |