Navigation

user-avatar

User profile images with fallback support and optional status indicators. Perfect for user interfaces and comment systems.

Attributes

Attribute	Values	Default	Description
`data-size`	`xs`, `sm`, `md`, `lg`, `xl`, `2xl`	`md`	Avatar size
`data-shape`	`square`, `rounded`	circle	Border radius style
`data-ring`	boolean	-	Add border ring

Avatars come in six sizes for different contexts.

Display a user's profile image.

Display initials when no image is available.

Choose between circle (default), rounded, or square shapes.

Show online/offline status with a colored dot.

Display multiple avatars in an overlapping stack using layout-cluster with data-layout-overlap.

Add a decorative ring around the avatar.