Avatar
Display user profile pictures with automatic fallback to initials when images fail to load.
Install Dependencies
npx quickcode-ui add AvatarExamples
Default Avatar
SC
JDProps
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size of the avatar |
className | string | undefined | Additional CSS classes |
children | React.ReactNode | required | AvatarImage and AvatarFallback content |
showTooltip | boolean | false | Whether to show tooltip on hover |
tooltipContent | string | undefined | Content to display in the tooltip |
AvatarImage
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | required | Image source URL |
alt | string | required | Alternative text for the image |
className | string | undefined | Additional CSS classes |
AvatarFallback
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | required | Fallback content (typically initials) |
className | string | undefined | Additional CSS classes |
Last updated on