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

Sizes

Avatars come in six sizes for different contexts.

With Image

Display a user's profile image.

Fallback (Initials)

Display initials when no image is available.

Shapes

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

Status Indicator

Show online/offline status with a colored dot.

Avatar Group

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

With Ring

Add a decorative ring around the avatar.

Related
↑