//
An image element with a fallback for representing the user.
bun add xiod-ui1import {2 Avatar,3 AvatarFallback,4 AvatarGroup,5 AvatarImage6} from "xiod-ui/avatar";1<Avatar>2 <AvatarGroup>3 <AvatarImage />4 </AvatarGroup>5</Avatar>| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: AvatarRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: AvatarRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, AvatarRootState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
size | "sm"| "lg"| "xs"| "md"| "xl"| "2xl"| null| undefined | md | |
shape | "circle"| "square"| null| undefined | circle |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: AvatarFallbackState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: AvatarFallbackState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, AvatarFallbackState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
delay | number| undefined | 0 | How long to wait before showing the fallback. Specified in milliseconds. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: AvatarImageState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: AvatarImageState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, AvatarImageState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
keepMounted | boolean| undefined | false | Whether the image element stays mounted and loads in place instead of being preloaded. Supports `loading="lazy"` and optimized image components such as `next/image`. |
onLoadingStatusChange | ((status: ImageLoadingStatus) => void)| undefined | - | Callback fired when the loading status changes. |