Avatar — lunaDOM Docs

The <luna-avatar> component displays a user's profile picture with optional status indicators.

Paths

/lunadom/components/avatar/avatar.js

REQUIRED

Basic Usage

No Zoom on Hover

Standard Status Badges

Custom Status with Emoji

Hover to reveal full status text.

🌙 Sleeping

Shape Variants

Customization

Slots
default - Avatar content
status - Custom status content (when status="slot")

Attributes
src - Image source URL
alt - Image alt text (also used for generating initials)
size="3rem" - Avatar size (default: 3rem)
variant="circle" - Avatar variant (circle, rounded, square)
status - Status indicator (online, busy, away, offline, slot)
no-zoom - Disables the scale hover zoom effect

CSS Variables
--luna-avatar-size - Override width/height
--luna-avatar-bg - Avatar background color
--luna-avatar-color - Initials text color
--luna-avatar-border - Avatar border color
--luna-accent - Accent color on hover
--luna-pill-font-size - Custom status pill text size

Example Code

<luna-avatar src="image.jpg" alt="User Name" size="4rem"> </luna-avatar>  <luna-avatar alt="Alex Smith"></luna-avatar>  <luna-avatar src="image.jpg" alt="User" status="online"></luna-avatar> <luna-avatar src="image.jpg" alt="User" status="busy"></luna-avatar>  <luna-avatar src="image.jpg" alt="User" status="slot"> <span slot="status">🌙 Sleeping</span> </luna-avatar> <luna-avatar src="image.jpg" alt="User" status="slot"> <span slot="status">💻 Coding</span> </luna-avatar>  <luna-avatar src="image.jpg" variant="rounded"></luna-avatar> <luna-avatar src="image.jpg" variant="square"></luna-avatar>  <luna-avatar src="image.jpg" alt="User" no-zoom></luna-avatar>