Avatar

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

Basic Usage

Avatars with different shapes and features.

await import('/components/data-display/avatar.js');
const { tags, $ } = Lightview;
const { div, Avatar } = tags;

const avatars = div({ style: 'display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;' },
    // Image avatar - default circle
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=1',
        alt: 'User 1',
        size: 'w-16'
    }),
    // Squircle shape
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=2',
        size: 'w-16',
        shape: 'squircle'
    }),
    // Hexagon shape
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=3',
        size: 'w-16',
        shape: 'hexagon'
    }),
    // Rounded shape
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=4',
        size: 'w-16',
        shape: 'rounded'
    }),
    // With ring
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=5',
        size: 'w-16',
        ring: true,
        ringColor: 'ring-primary'
    }),
    // Online status
    Avatar({ 
        src: 'https://i.pravatar.cc/100?img=6',
        size: 'w-16',
        online: true
    })
);

$('#example').content(avatars);
await import('/components/data-display/avatar.js');
const { $, tags } = Lightview;
const { div, Avatar } = tags;

const avatars = {
    tag: div,
    attributes: { style: 'display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;' },
    children: [
        { tag: Avatar, attributes: { src: 'https://i.pravatar.cc/100?img=1', alt: 'User 1', size: 'w-16' } },
        { tag: Avatar, attributes: { src: 'https://i.pravatar.cc/100?img=2', size: 'w-16', shape: 'squircle' } },
        { tag: Avatar, attributes: { src: 'https://i.pravatar.cc/100?img=3', size: 'w-16', shape: 'hexagon' } },
        { tag: Avatar, attributes: { src: 'https://i.pravatar.cc/100?img=5', size: 'w-16', ring: true, ringColor: 'ring-primary' } },
        { tag: Avatar, attributes: { placeholder: 'JD', size: 'w-16' } },
        { tag: Avatar, attributes: { src: 'https://i.pravatar.cc/100?img=4', size: 'w-16', online: true } }
    ]
};

$('#example').content(avatars);
await import('/components/data-display/avatar.js');
const { $ } = Lightview;

const avatars = {
    div: {
        style: 'display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;',
        children: [
            { Avatar: { src: 'https://i.pravatar.cc/100?img=1', alt: 'User 1', size: 'w-16' } },
            { Avatar: { src: 'https://i.pravatar.cc/100?img=2', size: 'w-16', shape: 'squircle' } },
            { Avatar: { src: 'https://i.pravatar.cc/100?img=3', size: 'w-16', shape: 'hexagon' } },
            { Avatar: { src: 'https://i.pravatar.cc/100?img=5', size: 'w-16', ring: true, ringColor: 'ring-primary' } },
            { Avatar: { placeholder: 'JD', size: 'w-16' } },
            { Avatar: { src: 'https://i.pravatar.cc/100?img=4', size: 'w-16', online: true } }
        ]
    }
};

$('#example').content(avatars);
<!-- Import the component (registers lv-avatar) -->
<script type="module" src="/components/data-display/avatar.js"></script>

<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
    <lv-avatar src="https://i.pravatar.cc/100?img=1" size="w-16"></lv-avatar>
    <lv-avatar src="https://i.pravatar.cc/100?img=2" size="w-16" shape="squircle"></lv-avatar>
    <lv-avatar src="https://i.pravatar.cc/100?img=3" size="w-16" shape="hexagon"></lv-avatar>
    <lv-avatar src="https://i.pravatar.cc/100?img=5" size="w-16" ring ring-color="ring-primary"></lv-avatar>
    <lv-avatar placeholder="JD" size="w-16"></lv-avatar>
    <lv-avatar src="https://i.pravatar.cc/100?img=4" size="w-16" online></lv-avatar>
</div>

User Status Toggle

Avatar with reactive online/offline status 

await import('/components/data-display/avatar.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, span, Avatar, Button } = tags;

const isOnline = signal(true);

const demo = div({ style: 'display: flex; align-items: center; gap: 1.5rem;' },
    () => 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({ style: 'display: flex; flex-direction: column; gap: 0.5rem;' },
        span({ style: 'font-weight: 700;' }, 'Sarah Johnson'),
        span({ style: 'font-size: 0.875rem;' }, 
            () => isOnline.value ? '🟢 Online' : '⚫ Offline'
        ),
        Button({ 
            size: 'sm',
            onclick: () => { isOnline.value = !isOnline.value; }
        }, () => isOnline.value ? 'Go Offline' : 'Go Online')
    )
);

$('#example').content(demo);
await import('/components/data-display/avatar.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { div, span, Avatar, Button } = tags;

const isOnline = signal(true);

const demo = {
    tag: div,
    attributes: { style: 'display: flex; align-items: center; gap: 1.5rem;' },
    children: [
        () => ({
            tag: Avatar,
            attributes: {
                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
            }
        }),
        {
            tag: div,
            attributes: { style: 'display: flex; flex-direction: column; gap: 0.5rem;' },
            children: [
                { tag: span, attributes: { style: 'font-weight: 700;' }, children: ['Sarah Johnson'] },
                { tag: span, attributes: { style: 'font-size: 0.875rem;' }, children: [() => isOnline.value ? '🟢 Online' : '⚫ Offline'] },
                {
                    tag: Button,
                    attributes: {
                        size: 'sm',
                        onclick: () => { isOnline.value = !isOnline.value; }
                    },
                    children: [() => isOnline.value ? 'Go Offline' : 'Go Online']
                }
            ]
        }
    ]
};

$('#example').content(demo);
await import('/components/data-display/avatar.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;

const isOnline = signal(true);

const demo = {
    div: {
        style: 'display: flex; align-items: center; gap: 1.5rem;',
        children: [
            () => ({
                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: {
                    style: 'display: flex; flex-direction: column; gap: 0.5rem;',
                    children: [
                        { span: { style: 'font-weight: 700;', children: ['Sarah Johnson'] } },
                        { span: { style: 'font-size: 0.875rem;', children: [() => isOnline.value ? '🟢 Online' : '⚫ Offline'] } },
                        {
                            Button: {
                                size: 'sm',
                                onclick: () => { isOnline.value = !isOnline.value; },
                                children: [() => isOnline.value ? 'Go Offline' : 'Go Online']
                            }
                        }
                    ]
                }
            }
        ]
    }
};

$('#example').content(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

Avatar Gallery

Live examples using <lv-avatar> custom elements.

Shapes

Status Indicators

Placeholders

Avatar Group