Avatar
Аватар із ініціалами, градієнтом бренду й падінням на ініціали, якщо картинка не завантажилась.
Замість чотирьох окремих реалізацій під ролі (USER/ASSISTANT/SYSTEM) —
один компонент: картинка → ініціали → порожнє коло. Рольові іконки — це
слот default споживача, а не зашитий Font Awesome.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
name | string | undefined | Ім'я людини: джерело ініціалів і доступна назва. |
size | number | 32 | Розмір у пікселях. |
tone | neutralprimaryauto | "primary" | Палітра заливки, коли картинки немає. `auto` — один із восьми кольорів за `seed` (або за іменем): так учасників групи видно одразу. |
src | string | undefined | URL зображення. Помилка завантаження мовчки падає на ініціали. |
seed | string | undefined | Стабільний ідентифікатор для `tone="auto"`; за замовчуванням — `name`. |
shape | circlesquare | "circle" | Форма. `square` — для компаній, команд і логотипів: коло підказує «людина», і логотип у колі ще й втрачає кути. |
status | onlineofflinebusyaway | undefined | Індикатор присутності у правому нижньому куті. Колір дублюється словом у доступній назві: «Марія, онлайн». Кільце навколо крапки — колір картки; на іншому тлі (активний рядок списку, hover) задайте батькові змінну `--avatar-ring`. |
Слоти
| Назва | Опис |
|---|---|
default | Власний вміст замість картинки й ініціалів (іконка, логотип). |
Коли використовувати
Будь-яке представлення людини чи акаунта: список користувачів, шапка коментаря, вибір виконавця.
Компанія, команда чи сервіс — shape="square": коло підказує «людина», а
логотип у колі ще й втрачає кути.
Коли НЕ використовувати
Для логотипів компаній із складною геометрією краще слот default з
власним SVG, ніж спроби вмістити логотип в ініціали.
Ініціали
Беруться перші БУКВИ чи цифри двох перших слів, а не перші символи: назви компаній починаються з лапок і дужок, і «ТОВ «Сігма Трейд»» давало «Т«». Слово без жодної букви («—», «&») пропускається.
Кегль — частка діаметра (40% для однієї літери, 36% для пари: «МШ» чи «ЖД» при
40% впиралися в краї кола), а не сходинки text-xs/text-sm: сходинки
впиралися в 13px на будь-якому розмірі, а плитка «+N» в
UiAvatarGroup росла пропорційно, і на
64px «+3» був удвічі більшим за ініціали поруч. Тепер формула одна на обох.
Заливка — градієнт primary-600 → primary-700: на попередньому
400 → 600 білі ініціали мали 2.5:1 у світлому куті, нижче 4.5:1 для
тексту такого кегля.
Кольорова палітра
tone="auto" фарбує аватар одним із восьми кольорів (синій, фіолетовий,
рожевий, теракотовий, зелений, смарагдовий, бірюзовий, червоний), які
обираються за seed — або за name, якщо seed не заданий. Так у списку
чатів і в групі відправників видно одразу, не читаючи імен. Передавайте
стабільний ідентифікатор (id), а не ім'я: інакше перейменування змінює
колір людини. Кожен колір — градієнт зі змінних --avatar-N-from/to
(assets/css/tokens.css), однаковий у світлій і темній темах, з білим
текстом не нижче 4.5:1 у найсвітлішій точці. Без tone="auto" аватар
лишається синім, як раніше.
Кільце індикатора
Крапка статусу обведена кільцем кольору картки — так вона «вирізана» з
аватара. Коли аватар стоїть на іншому тлі (активний рядок списку, hover),
задайте предку CSS-змінну --avatar-ring — кільце підхопить її і не
світитиметься плямою: class="hover:[--avatar-ring:var(--bg-hover)]".
Доступність
Контейнер має role="img" і aria-label з імені; картка всередині —
з порожнім alt, щоб скрінрідер не читав «av2871.jpg» двічі. Битий
URL ніколи не лишає «скелець» — компонент сам перемикається на ініціали.