Avatar

API Reference

Usage

<script lang="ts">
  import { Avatar } from '$lib/components/avatar';
</script>

<Avatar size="md" fallback="JD" image="/avatar-01.jpg" alt="Avatar" />

The Avatar component extends the Bits UI <Avatar> component. Find the full list of available properties in the official Bits UI documentation.

Prop	Type	Default
`gap`	`string`	`md`

The icon is displayed when neither a fallback text or an image source is provided. In this case, the avatar will show a default user icon.

When an image is not provided, the avatar displays a fallback text instead. This is commonly used to show initials of a user's name.

The size property controls the dimensions of the avatar.

The color property controls the background color of the avatar when no image is provided.

Use the AvatarGroup component to display multiple avatars together. The gap property controls the spacing between the avatars.