Avatar

Avatar is used to show a thumbnail representation of an individual or business. Supports images, placeholders, status indicators, and grouping.

Basic Example

Avatars with different shapes and features


const { default: Avatar } = await import('/components/data-display/avatar.js');

const { tags, $ } = Lightview;
const { div } = tags;

const avatars = div({ class: 'flex gap-4 items-center' },
    // Image avatar
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=1',
        alt: 'User 1',
        size: 'w-16'
    }),
    // With ring
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=2',
        size: 'w-16',
        ring: true,
        ringColor: 'ring-primary'
    }),
    // Placeholder
    Avatar({ 
        placeholder: 'JD',
        size: 'w-16'
    }),
    // Online status
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=4',
        size: 'w-16',
        online: true
    })
);

$('#demo').insert(avatars);

User Status Toggle

Avatar with reactive online/offline status


const { default: Avatar } = await import('/components/data-display/avatar.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, span } = tags;

const isOnline = signal(true);

const demo = div({ class: 'flex items-center gap-6' },
    () => Avatar({ 
        src: 'https://i.pravatar.cc/100?img=5',
        size: 'w-20',
        ring: true,
        ringColor: isOnline.value ? 'ring-success' : 'ring-error',
        online: isOnline.value,
        offline: !isOnline.value
    }),
    div({ class: 'flex flex-col gap-2' },
        span({ class: 'font-bold' }, 'Sarah Johnson'),
        span({ class: 'text-sm' }, 
            () => isOnline.value ? '🟢 Online' : '⚫ Offline'
        ),
        Button({ 
            size: 'sm',
            onclick: () => { isOnline.value = !isOnline.value; }
        }, () => isOnline.value ? 'Go Offline' : 'Go Online')
    )
);

$('#demo').insert(demo);

Props

Prop	Type	Default	Description
`src`	string	-	Image source URL
`alt`	string	'Avatar'	Alt text for image
`placeholder`	string	-	Text to show when no image (e.g., initials)
`size`	string	'w-12'	Width class (w-8, w-12, w-16, w-24, etc.)
`shape`	string	'circle'	'circle' \| 'rounded' \| 'squircle' \| 'hexagon' \| 'triangle'
`ring`	boolean	false	Add ring border
`ringColor`	string	'ring-primary'	Ring color class
`online`	boolean	false	Show online indicator
`offline`	boolean	false	Show offline indicator

Shapes

With Ring

Online/Offline Status

Placeholder

Avatar Group

+99

For more examples, see the DaisyUI Avatar documentation.