Display

Avatar

User avatar that shows an image and falls back to colored initials, with size, shape and presence status.

<script>
  import { Avatar } from "@codeatlasdev/ui";
</script>

<Avatar src="/ana.jpg" alt="Ana Lima" size="lg" status="online" />

Without src, or when the image fails to load, the avatar shows initials derived from alt (or fallback). fallback also takes a snippet, for an icon on groups, channels and bots that have no meaningful initials. The photo is a real <img>: pass loading="lazy" in long lists and referrerpolicy="no-referrer" for CDNs that reject a cross-origin Referer; onerror fires when it fails so you can refetch a signed URL. The background color is generated from the name, so the same person always gets the same color.

#107

With image

Loads a real image URL and falls back to initials if it fails.

Reference #107 · Pick in the gallery

Code

<script lang="ts">
  import { Avatar } from '@codeatlasdev/ui';
</script>

<Avatar src="https://i.pravatar.cc/150?img=1" alt="Alice Martin" size="lg" />
<Avatar src="https://i.pravatar.cc/150?img=12" alt="Bob Chen" size="lg" />
<Avatar src="https://i.pravatar.cc/150?img=32" alt="Clara Silva" size="lg" />
<Avatar src="https://i.pravatar.cc/150?img=47" alt="David Kim" size="lg" />

#108

Initials fallback

No `src`: initials come from `alt`, or from `fallback` when set.

AM BC CS DK ?

Reference #108 · Pick in the gallery

Code

<script lang="ts">
  import { Avatar } from '@codeatlasdev/ui';
</script>

<Avatar alt="Alice Martin" size="lg" />
<Avatar alt="Bob Chen" size="lg" />
<Avatar alt="Clara Silva" size="lg" />
<Avatar fallback="DK" size="lg" />
<Avatar fallback="?" size="lg" />

Icon fallback

`fallback` as a snippet: an icon instead of initials, with `loading` and `referrerpolicy` passed to the `<img>`.

Code

<script lang="ts">
  import { Avatar } from '@codeatlasdev/ui';
  import { Bot, Users } from '@lucide/svelte';
</script>

<!-- An image that fails to decode without a request: shows the fallback, logs no 404. -->
<Avatar src="data:image/png;base64,AAAA" alt="Family" size="lg" loading="lazy" referrerpolicy="no-referrer">
  {#snippet fallback()}<Users size={22} aria-hidden="true" />{/snippet}
</Avatar>
<Avatar alt="Support bot" size="lg">
  {#snippet fallback()}<Bot size={22} aria-hidden="true" />{/snippet}
</Avatar>

#110

Sizes

Named sizes `xs` to `xl`, or any number in pixels.

ES SM ME LA EL CU

Reference #110 · Pick in the gallery

Code

<script lang="ts">
  import { Avatar } from '@codeatlasdev/ui';
</script>

<Avatar alt="Extra small" size="xs" />
<Avatar alt="Small" size="sm" />
<Avatar alt="Medium" size="md" />
<Avatar alt="Large" size="lg" />
<Avatar alt="Extra large" size="xl" />
<Avatar alt="Custom" size={80} />

#109

Shape and status

`shape="rounded"` and the presence dot.

AL ON BU AW OF

Reference #109 · Pick in the gallery

Code

<script lang="ts">
  import { Avatar } from '@codeatlasdev/ui';
</script>

<Avatar alt="Ana Lima" size="lg" shape="rounded" />
<Avatar alt="Online" size="lg" status="online" />
<Avatar alt="Busy" size="lg" status="busy" />
<Avatar alt="Away" size="lg" status="away" />
<Avatar alt="Offline" size="lg" status="offline" />

#111

Avatar stack

Overlap pattern common in collaboration UIs.

Reference #111 · Pick in the gallery

Code

<script lang="ts">
  import { Avatar } from '@codeatlasdev/ui';

  const people = [
    { src: 'https://i.pravatar.cc/150?img=1', alt: 'Alice' },
    { src: 'https://i.pravatar.cc/150?img=12', alt: 'Bob' },
    { src: 'https://i.pravatar.cc/150?img=32', alt: 'Clara' },
    { alt: '+4' },
  ];
</script>

<div class="stack">
  {#each people as p, i}
    <div class="item" style="--z:{people.length - i}">
      <Avatar src={p.src} alt={p.alt} size="md" />
    </div>
  {/each}
</div>

<style>
  .stack { display: flex; align-items: center; }
  .item { margin-left: -10px; position: relative; z-index: var(--z, 0); }
  .item:first-child { margin-left: 0; }
</style>

Props

Prop	Type	Default	Description
`src`	`string`	`undefined`	Image URL, rendered as a real `<img>`. The fallback shows beneath it while it loads and when it fails.
`alt`	`string`	`''`	Alt text. Initials are derived from it when no `fallback` is set.
`fallback`	`string \| Snippet`	`undefined`	Explicit initials (string) or an icon/any content (snippet). Overrides the initials derived from `alt`.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`'md'`	Named size (20, 28, 36, 48, 64px) or a diameter in pixels.
`shape`	`'circle' \| 'rounded'`	`'circle'`	Avatar outline.
`status`	`'online' \| 'offline' \| 'busy' \| 'away'`	`undefined`	Shows a presence dot in the bottom-right corner.
`loading`	`'lazy' \| 'eager'`	`undefined`	Passed to the `<img>`. Use `lazy` in long lists so off-screen photos are not fetched.
`referrerpolicy`	`ReferrerPolicy`	`undefined`	Passed to the `<img>`, e.g. `no-referrer` for CDNs that reject a cross-origin `Referer`.
`crossorigin`	`'anonymous' \| 'use-credentials'`	`undefined`	Passed to the `<img>`.
`onerror`	`(event: Event) => void`	`undefined`	Called when the image fails to load; the fallback shows. Refetch a signed URL here.
`skeleton`	`boolean`	`false`	Loading placeholder with the exact avatar size; no image request is made. See Skeleton.
`class`	`string`	`''`	Extra class names.