Skip to main content

Avatar

The Avatar control displays user profile images or user names' initials as circular badges. It supports both single user and multiple user displays, with automatic text extraction from names, customizable colors, and responsive overflow handling.

avatar-n

Initialization​

To create an Avatar instance on a page, you need to complete the following steps:

  • import the source file of the control on a page:
App.svelte
<script>
  import { Avatar } from "@svar-ui/svelte-core";
</script>
  • use the <Avatar> tag to initialize the control with a user object:
App.svelte
<script>
  const user = {
    id: 1,
    name: "John Doe",
    avatar: "path/to/image.jpg"
  };
</script>

<Avatar value={user} />

A default avatar is rendered with a size of 32 pixels.

Avatar display priorities​

The Avatar component determines what to display based on the provided value parameters:

  1. Image: If the avatar URL is provided, the component displays the image
  2. Initials with color: If color is provided and no avatar URL is given, it's used as the background color with automatically selected font color (white or dark)
  3. Initials with default color: If neither avatar nor color is provided, default values are used
  4. Empty badge: If name is not provided, no letters are shown

avatar-n

Extracting initials from names​

When displaying initials, the Avatar component automatically extracts the first letter from each word in the user's name, with a maximum of 2 letters displayed.

<script>
  const users = [
    { id: 1, name: "John" },           // Shows "J"
    { id: 2, name: "Anna Smith" },     // Shows "AS"
    { id: 3, name: "Mary Jane Watson" } // Shows "MJ" (max 2 letters)
  ];
</script>

<Avatar value={users[1]} />

Displaying a single user​

You can display an avatar for a single user by passing a user object to the value property.

<script>
  const user = {
    id: 1,
    name: "Anna Smith",
    avatar: "https://example.com/avatar.jpg",
    color: "#4CAF50"
  };
</script>

<Avatar value={user} />

Displaying multiple users​

The Avatar component can display multiple users at once by passing an array of user objects to the value property:

<script>
  const users = [
    { id: 1, name: "John Doe", avatar: "path/to/john.jpg" },
    { id: 2, name: "Anna Smith", color: "#2196F3" },
    { id: 3, name: "Bob Johnson", color: "#FF9800" }
  ];
</script>

<Avatar value={users} />

When multiple users are provided, their avatar badges are displayed in a row.

avatar-n

Setting avatar size​

You can customize the size of avatar badges using the size property. The size value sets both the width and height in pixels:

<Avatar value={user} size={48} />

The default size is 32 pixels.

avatar-n

Limiting visible avatars​

When displaying multiple users, you can limit the number of visible avatar badges using the limit property:

<script>
  const users = [
    { id: 1, name: "John Doe" },
    { id: 2, name: "Anna Smith" },
    { id: 3, name: "Bob Johnson" },
    { id: 4, name: "Mary White" },
    { id: 5, name: "Tom Brown" }
  ];
</script>

<Avatar value={users} limit={3} />

If the number of users exceeds the limit, the remaining avatars are hidden and replaced with a "+N" badge showing how many avatars are not visible.

avatar-n

Displaying images and initials​

The Avatar component can display a mix of avatar images and initials in a single stack.

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

  const users = [
    { id: 1, name: "John Doe", avatar: "path/to/john.jpg" },
    { id: 2, name: "Anna Smith", color: "#2196F3" },
    { id: 3, name: "Bob Johnson" },
    { id: 4, name: "Mary White", color: "#FF9800" }
  ];
</script>

<Avatar value={users} size={40} />

avatar-n

Responsive behavior​

The Avatar component automatically handles overflow when the container width is not sufficient to display all avatar badges:

  • Avatar badges that don't fit within the container width are automatically cut off
  • A "+N" badge appears to indicate how many avatars are hidden
  • This behavior works in combination with the limit property
<div style="width: 200px;">
  <Avatar value={users} />
</div>

Working with colors​

The Avatar component automatically selects the appropriate font color (white or dark) based on the background color to ensure optimal readability:

<script>
  const users = [
    { id: 1, name: "John Doe", color: "#1976D2" },    // Dark blue - white text
    { id: 2, name: "Anna Smith", color: "#FFEB3B" },   // Yellow - dark text
    { id: 3, name: "Bob Johnson", color: "#212121" }   // Dark gray - white text
  ];
</script>

<Avatar value={users} />

Related sample: Avatar