Avatar

Avatar — составной компонент для отображения фотографии или инициалов.

Avatar.Root задаёт размер и скругление, части внутри него свободно комбинируются.

Avatar.Image и Avatar.Fallback — пара «изображение / запасное содержимое»: пока картинка не загрузилась или её нет, виден Fallback. Avatar.Icon, Avatar.Status и Avatar.Ring — оверлеи поверх аватара.

Несколько аватаров в стопку с наложением собирает отдельный компонент AvatarGroup.

Используется в: AvatarGroup

Анатомия

Avatar.Root

Image | Fallback

Icon

Status

Ring

Примеры

Запасное содержимое

Без Avatar.Image (или пока изображение не загрузилось) виден Avatar.Fallback. Текст обрезается хелпером getInitials до первых букв двух первых слов — можно передавать полное имя пользователя.

Иконка запасного содержимого

Вместо текста в Avatar.Fallback можно передать произвольный контент, например иконку.

Цвет запасного содержимого

color — цвет фона Fallback, принимает любое CSS-значение; если не передан — вычисляется хелпером getStableColor из текста. Цвет текста подбирается автоматически: на светлом фоне — чёрный, на тёмном — белый. Цвет из имени «переедет» при переименовании пользователя — чтобы закрепить его навсегда, передайте в getStableColor id пользователя.

Иконка

Avatar.Icon — иконка по центру поверх аватара на полупрозрачной подложке. Во втором аватаре иконка появляется только по наведению — обёртка скрывает её селектором по data-avatar-group="avatar-icon".

Размер

Размер задаётся на Avatar.Root и управляет размером всех частей: запасного текста, иконки, точки статуса и кольца.

Скругление

Скругление углов аватара: от прямых углов до полного круга.

Статус

Avatar.Status — точка статуса в правом нижнем углу аватара:

online — зелёная
away — жёлтый полумесяц
dnd — красная с чертой «не беспокоить»
offline — серое полое кольцо

Кастомный цвет (color) — для состояний вне стандартного набора, имеет приоритет над цветом из status.

Кольцо истории

Avatar.Ring — кольцо вокруг аватара с зазором, как истории в мессенджерах. Градиент высчитывается из переданного цвета автоматически. Отступы Avatar.Icon и Avatar.Status учитывают кольцо сами.

API

Prop	Type	Default
`children`*	`ReactNode`	-
`size` Размер аватарки. Без него берётся ступень контейнера (AvatarGroup, Cell) — или sm, когда контейнер её не задаёт	`Size`	`sm`
`radius` Скругление углов аватара	`Radius`	`"sm"`
`className`	`string`	-
`style`	`CSSProperties`	-

Avatar.Image

Изображение аватара; скрыто, пока не загрузилось успешно.

Prop	Type	Default
`src`* Ссылка на изображение	`string`	-
`alt` Альтернативный текст изображения	`string`	-

Avatar.Fallback

Запасное содержимое: единая строка обрезается до инициалов (getInitials), произвольный контент рендерится как есть; фон — color или автоцвет из текста (getStableColor).

Prop	Type	Default
`children`* Содержимое, которое отобразится, пока изображения нет или оно не загрузилось. Единая строка обрезается до инициалов, произвольный контент (например, иконка) рендерится как есть	`ReactNode`	-
`color` Цвет фона. По умолчанию вычисляется хелпером getStableColor из текста children	`string`	-

Avatar.Icon

Иконка по центру поверх аватара на полупрозрачной подложке.

Prop	Type	Default
`children`* Иконка, которая отображается по центру поверх аватара	`ReactNode`	-

Avatar.Status

Точка статуса в правом нижнем углу — пресет status или кастомный color.

Prop	Type	Default
`status` Статус пользователя — точка в правом нижнем углу аватара	`Status`	-
`color` Кастомный цвет точки — для состояний вне стандартного набора, имеет приоритет над цветом из status	`string`	-

Avatar.Ring

Кольцо-«история» вокруг аватара — градиент из переданного цвета.

Prop	Type	Default
`color`* Цвет кольца вокруг аватара (как истории в мессенджерах) — градиент высчитывается из переданного цвета	`string`	-