Определение

Avatar (Аватар) — это графическое представление пользователя, которое обычно включает в себя изображение или инициалы. Оно используется для идентификации и персонализации пользователей в интерфейсе.

Функциональность

Идентификация

Чаще всего Avatar используется для идентификации пользователя. Avatar позволяет пользователям быть узнаваемыми и отличаться друг от друга. Он помогает создать уникальную личность каждого пользователя в интерфейсе.

Badge indicator

У Avatar есть Badge indicator имеющий варианты Verificated, Online, Sub image.

Avatar Type

У Avatar есть варианты отображения: Image, Placeholder и базовые цвета палитры системы с инициалами.

Contrast Border

У Avatar есть включающаяся обводка для дополнительной коснтрастности.

Figure

Аватар можно использовать круглый и квадратный

Дизайн и Стиль

Цвет и Контраст

У компонента Avatar есть несколько типов заливок:

• c использованием картинки.
  
• с использованием цвета и инициалов. Цвет не меняется вручную,
  так как он заложен в варианты
  
• с использованием нейтрального цвета и Placeholder Icon — Neutral Semantic, цвет принимает нейтральный от токена Neutral заданного оттенками бренда.
  

Текст и Иконки

Краткость текста

Текст в Avatar не используется

Анатомия

Внутренние компоненты

Для понимания анатомии входящих компонентов смотри примеры Бейдж счетчик (Badge Counter)

Размеры

Размеры компонента меняются в вкладке Swap Instance

Avatar Stack

Внутренние компоненты

Для понимания анатомии входящих компонентов смотри примеры Бейдж счетчик (Badge Counter)

Анимация

Avatar Stack имеет анимацию Hover, отключение анимации задается через пропс.

Размеры

Размеры компонента меняются в вкладке Swap Instance