value

Description

Required. Specifies users to display as avatar badges

Usage

value: IUser | IUser[];

interface IUser {
  id: string | number;
  name?: string;
  avatar?: string;
  color?: string;
}

Parameters

The property takes a user object or an array of user objects with the next parameters:

• id - (required) unique identifier of the user
• name - (optional) full name of the user. Used to generate initials (first letter from each word, max 2 letters)
• avatar - (optional) URL to the user's avatar image. If provided, the image is displayed
• color - (optional) hex color code for the avatar background. The component automatically selects white or dark text color for optimal contrast

Example

A single user with avatar image:

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

  const user = {
    id: 1,
    name: "John Doe",
    avatar: "https://example.com/avatars/john.jpg"
  };
</script>

<Avatar value={user} />

---

Related article: Displaying multiple users