Avatar

A person/entity likeness — an image with a graceful fallback to initials (from name), then an icon, then a default glyph. Shared size axis; the fallback fill uses the variant tokens. AvatarGroup stacks several with a +N overflow.

Fallback chain

image

JD initials

icon

glyph

<script>
  import { Avatar } from '@spaethtech/svelte-ui';
</script>

<Avatar src="/jane.jpg" name="Jane Doe" />
<Avatar name="Jane Doe" />        <!-- initials fallback -->
<Avatar />                        <!-- default glyph -->

Sizes & shape

Status

<Avatar name="Jane Doe" status="online" />
<Avatar name="Ravi Patel" status="busy" />
<Avatar name="Mia Chen" status="away" />

AvatarGroup

Overlapped, ringed by the page background; max collapses the rest into +N.

<script>
  import { AvatarGroup } from '@spaethtech/svelte-ui';
  const team = [
    { name: 'Jane Doe', src: '/1.jpg' },
    { name: 'Ravi Patel', src: '/2.jpg' },
    /* … */
  ];
</script>

<AvatarGroup items={team} max={4} />