Avatar
Аватар із ініціалами, градієнтом бренду й падінням на ініціали, якщо картинка не завантажилась.
Замість чотирьох окремих реалізацій під ролі (USER/ASSISTANT/SYSTEM) —
один компонент: картинка → ініціали → порожнє коло. Рольові іконки — це
слот default споживача, а не зашитий Font Awesome.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
name | string | undefined | Ім'я людини: джерело ініціалів і доступна назва. |
size | number | 32 | Розмір у пікселях. |
tone | neutralprimary | "primary" | Палітра заливки, коли картинки немає. |
src | string | undefined | URL зображення. Помилка завантаження мовчки падає на ініціали. |
Слоти
| Назва | Опис |
|---|---|
default | Власний вміст замість картинки й ініціалів (іконка, логотип). |
Коли використовувати
Будь-яке представлення людини чи акаунта: список користувачів, шапка коментаря, вибір виконавця.
Коли НЕ використовувати
Для логотипів компаній із складною геометрією краще слот default з
власним SVG, ніж спроби вмістити логотип в ініціали.
Доступність
Контейнер має role="img" і aria-label з імені; картка всередині —
з порожнім alt, щоб скрінрідер не читав «av2871.jpg» двічі. Битий
URL ніколи не лишає «скелець» — компонент сам перемикається на ініціали.