Avatar

Overview

Avatars visually represent users, teams, or entities. They can display profile images, initials, or be combined into groups to represent multiple users. MiniKit provides avatar components with support for images, initials, sizing options, and grouped layouts.

Basic Usage

Use initials when a profile image is not available.

<figure data-variant="avatar">AJ</figure>

Images

Display profile images inside the avatar component.

Preview Code

Copy

<figure data-variant="avatar">
  <img src="https://i.pravatar.cc/100" alt="User avatar"/>
</figure>

Sizes

Avatars support small, default, and large sizes.

<div class="hstack">
  <figure data-variant="avatar" data-size="sm">AJ</figure>
  <figure data-variant="avatar">AJ</figure>
  <figure data-variant="avatar" data-size="lg">AJ</figure>
</div>

Avatar Groups

Group multiple avatars together to represent teams, members, or participants.

<figure data-variant="avatar" role="group">
  <figure data-variant="avatar">AJ</figure>
  <figure data-variant="avatar">MK</figure>
  <figure data-variant="avatar">JS</figure>
</figure>

Accessibility

Avatar images should include meaningful alternative text whenever the person's identity is important. Decorative avatars should use an empty alt="" attribute so they are ignored by assistive technologies.

• Always provide descriptive alt text for meaningful profile images.
• Use alt="" for decorative images.
• Initial-based avatars should be accompanied by visible text when identifying a person is important.
• Avatar groups should include surrounding context that describes the represented users or team.

API