Display

Avatar

User avatar backed by Bits UI 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). The background color is generated from the name, so the same person always gets the same color.

With image

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

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" />

Initials fallback

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

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" />

Sizes

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

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} />

Shape and status

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

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" />

Avatar stack

Overlap pattern common in collaboration UIs.

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. Initials are shown while loading or when loading fails.
`alt`	`string`	`''`	Alt text. Initials are derived from it when no `fallback` is set.
`fallback`	`string`	`undefined`	Explicit initials. Overrides the ones 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.
`class`	`string`	`''`	Extra class names.