Data DisplayСпецификация компонента·версия 1.5.0·Открыть в Figma

Avatar

Avatar — визуальное представление пользователя или сущности. Отображает фото или инициалы на цветном фоне.

1. Key Principles of Use

When to use

Use — для идентификации пользователя в профиле, списке, чате, карточке.

2. Anatomy

СлотОписание
imageФото (при View=Image)
initialsИнициалы (при View=Initials)
statusIndicatorИндикатор статуса (при Status≠Default)

3. Variants

Figma Component Sets

Имя в FigmaПримечание
Avatar24SS — с числом, нестандартно
AvatarMM — без числа
AvatarLL — без числа
AvatarXLXL — без числа
AvatarXXLXXL — без числа

Нестандартное именование: Avatar24S содержит число, остальные — нет.

View

ViewОписание
ImageФотография пользователя
InitialsИнициалы на цветном фоне

Status

StatusОписание
DefaultБез индикатора
ActiveЗелёный индикатор (онлайн)
InactiveСерый индикатор (оффлайн)

isCirculed

ЗначениеОписание
trueКруглая форма
falseСкруглённый квадрат

4. Sizes

T-shirtКонтекст
S (24px)Встроенный в Chip, строки таблиц
MКомментарии, списки
LКарточки пользователя
XLПрофиль, заголовок страницы
XXLКрупный профиль

7. Accessibility

АтрибутЗначениеКогда
altИмя пользователяView=Image
aria-labelИмя + статусПри наличии статусного индикатора
Нашли расхождение документации и библиотеки — напишите команде.Сообщить о расхождении