Avatar

A user avatar with image support, fallback initials, status indicator, and ring border.

Import

import { Avatar } from "@igorao79/uivix";

Shape

Status

Ring

Size48px

online

offline

busy

away

<Avatar
  src="/avatar.jpg"
  fallback="JD"
  status="online"
  shape="circle"
  ring
  size={48}
/>

Prop	Type	Default	Description
src	string	-	Image URL for the avatar
alt	string	-	Alt text for the image
fallback	string	"?"	Initials shown when no image is available
size	number	40	Avatar size in pixels
shape	"circle" \| "square"	"circle"	Shape of the avatar
status	"online" \| "offline" \| "busy" \| "away"	-	Status indicator dot
ring	boolean	false	Show a colored border ring
ringColor	string	"#8b5cf6"	Color of the ring border
className	string	-	Additional CSS classes