Avatar

Avatar отображает пользователя или сущность и поддерживает изображение, запасной текст и иконку.

Обзор

Стили Avatar сосредоточены на корневой поверхности, а дочерние части наследуют от неё размер и цветовой контекст.

Публичные CSS-переменные

Переменная	Значение	Влияет на
Общие размеры аватара.`Avatar` и дочерние части		В этом состоянии изменений не видно
Коэффициент скругления углов.`Avatar`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Avatar: размер корня, цвет и поверхность обрезки.
AvatarImage: изображение, обрезанное по форме корня.
AvatarFallback: запасной текст, размер которого рассчитывается от корня.
AvatarIcon: запасная иконка, выровненная по размеру корня.

Взаимодействие состояний и вариантов

size напрямую сопоставляется с токенами отступов.
variant меняет оформление фона и переднего плана.
Читаемость запасного текста сильно зависит от выбранного размера.

Примеры

.roundedAvatar {
  --avatar-br-ratio: 0.5;
}

.compactAvatar {
  --avatar-size: 20px;
}

Не переопределяйте

Не допускайте, чтобы запасной текст выходил за пределы выбранного размера.
Не убирайте обрезку, если изображения зависят от формы корня.
Не полагайтесь только на цвет, чтобы различать смысл вариантов.