Avatar

Avatars are user profile pictures or similar elements presenting their status (e.g. online or offline).

 

 

 

 

 

custom

name

size xssmmdlgxl

status nullonlineawaybusyoffline

image nullavatar-1.pngavatar-2.pngavatar-3.pngavatar-4.pngavatar-5.png

sub nullavatar-1.pngavatar-2.pngavatar-3.pngavatar-4.pngavatar-5.png

caption

badged

badge

bg

<script>
    import { Avatar } from 'svelte-spectre'
</script>

<Avatar name="AV" size="xl" badge="0">
    <img src="/img/avatar-1.png" alt="Albert Einstein" />
    <img slot="sub" src="/img/avatar-2.png" alt="Albert Einstein" />
</Avatar>
<Avatar name="AV" size="lg" status="online" badge="1">
    <img src="/img/avatar-3.png" alt="Albert Einstein" />
</Avatar>
<Avatar name="AV" size="md" status="away" badge="2">
    <img src="/img/avatar-4.png" alt="Albert Einstein" />
</Avatar>
<Avatar name="AV" size="sm" status="busy" badge>
    <img src="/img/avatar-5.png" alt="Albert Einstein" />
</Avatar>
<Avatar name="AV" size="xs" status="offline" />