Аватар

Задайте аватару name и не задавайте src — он нарисует инициалы вместо битой картинки. Это полезный запасной вариант для списка участников, где фото есть лишь у некоторых.

Простой аватар

ALGHAT

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Ada Lovelace' }),
  avatar({ name: 'Grace Hopper' }),
  avatar({ name: 'Alan Turing' }),
)

С картинкой

Когда задан src, alt берётся из имени — так что аватар никогда не остаётся неподписанной картинкой.

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ src: '/logo.svg', alt: 'sitelo', style: 'background: var(--su-surface-2)' }),
  avatar({ src: '/logo.svg', name: 'sitelo', square: true, style: 'background: var(--su-surface-2)' }),
)

Размеры

Кегль масштабируется вместе с аватаром, поэтому инициалы остаются соразмерными.

МРСРБР

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Малый Размер', size: 'sm' }),
  avatar({ name: 'Средний Размер', size: 'md' }),
  avatar({ name: 'Большой Размер', size: 'lg' }),
)

Квадратный

ПАПБ

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Проект А', square: true }),
  avatar({ name: 'Проект Б', square: true, color: 'success' }),
)

Цвета

Аватар без картинки получает мягкий фон из палитры.

PNSWD

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  avatar({ name: 'Primary', color: 'primary' }),
  avatar({ name: 'Neutral', color: 'neutral' }),
  avatar({ name: 'Success', color: 'success' }),
  avatar({ name: 'Warning', color: 'warning' }),
  avatar({ name: 'Danger', color: 'danger' }),
)

Иконки и другое содержимое

Потомки замещают инициалы — для иконки или одного символа.

stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ color: 'neutral' },
    icon('user'),
  ),
  avatar({ color: 'primary' }, '?'),
)

Группы

avatarGroup() накладывает потомков друг на друга и сворачивает всё сверх max в счётчик.

ALGHAT

ALGHAT+3

ALGH+1

stack({ gap: 'md' },
  avatarGroup(
    avatar({ name: 'Ada Lovelace' }),
    avatar({ name: 'Grace Hopper' }),
    avatar({ name: 'Alan Turing' }),
  ),
  avatarGroup({ max: 3 },
    avatar({ name: 'Ada Lovelace' }),
    avatar({ name: 'Grace Hopper' }),
    avatar({ name: 'Alan Turing' }),
    avatar({ name: 'Katherine Johnson' }),
    avatar({ name: 'Barbara Liskov' }),
    avatar({ name: 'Margaret Hamilton' }),
  ),
  avatarGroup({ max: 2, size: 'sm' },
    avatar({ name: 'Ada Lovelace', size: 'sm' }),
    avatar({ name: 'Grace Hopper', size: 'sm' }),
    avatar({ name: 'Alan Turing', size: 'sm' }),
  ),
)

В списке

AL
Ada Lovelace
Отправила 3 коммита в main
GH
Grace Hopper
Открыла пул-реквест

list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: 'Отправила 3 коммита в main',
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'Открыла пул-реквест',
  }),
)

Пропсы

Проп	Тип	По умолчанию	Описание
`name`	`string`	—	Идёт в инициалы, в title и в запасной alt картинки.
`src`	`string`	—	Картинка вместо инициалов.
`alt`	`string`	—	Альтернативный текст картинки; по умолчанию берётся из name.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Диаметр и кегль инициалов.
`square`	`boolean`	`false`	Скруглённый прямоугольник вместо круга.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Палитра фона под инициалами.

avatarGroup() принимает max — сколько показать, прежде чем свернуть остальных в счётчик, — и size, который используется только для этого счётчика.