Indicator

Лічильник або крапка на куті іконки чи аватара — непрочитане, нове, присутність.

Обгортка, що кріпить значок до кута свого вмісту. Центр значка стає рівно на кут цілі, тож він однаково «сідає» на кнопку 32px і на аватар 64px. Для круглих цілей circular зсуває точку кріплення на коло — інакше значок висить у повітрі поруч з аватаром.

API

Props

Назва	Тип	Типово	Опис
`position`	top-righttop-leftbottom-rightbottom-left	`"top-right"`	Кут, до якого кріпиться значок.
`tone`	neutralaccentdangerwarningsuccess	`"danger"`	Колір значка. `danger` — непрочитане, що чекає дії; `accent` — нове, але не термінове; `success`/`warning` — статус присутності чи стану.
`label`	`string`	`undefined`	Текст для скрінрідера: «3 непрочитаних». Типово значок `aria-hidden` і число має бути в назві самої кнопки — див. розділ «Доступність».
`count`	`number`	`null`	Число на значку. `null` чи `0` ховають значок (див. `showZero`), тож батькові не треба обгортати компонент у `v-if`.
`max`	`number`	`99`	Більші числа друкуються як «99+»: значок не розростається на пів іконки.
`dot`	`boolean`	`false`	Крапка без числа — «є щось нове», кількість неважлива.
`showZero`	`boolean`	`false`	Показувати значок і тоді, коли `count` дорівнює 0.
`circular`	`boolean`	`false`	Кругла ціль (аватар, кругла кнопка): значок зсувається до кола, а не до кута квадрата, інакше він висить у повітрі поруч.
`pulse`	`boolean`	`false`	Хвиля навколо значка — привертає увагу до щойно прийнятої події. Вимикайте, щойно користувач її побачив: безперервний рух на краю зору заважає читати все інше.

Слоти

Назва	Опис
`default`	Елемент, до якого кріпиться значок: кнопка з іконкою, аватар.

Коли використовувати

Кількість непрочитаного на іконці: сповіщення, вхідні, кошик.
Крапка «є щось нове», коли кількість неважлива.
Статус присутності на аватарі, якщо потрібен інший кут чи тон, ніж у вбудованого status в UiAvatar.

Коли НЕ використовувати

Як мітку статусу в тексті чи таблиці — це UiChip.
Для важливого, що не можна пропустити. Значок — периферійний сигнал; про помилку, яка блокує роботу, повідомляє UiAlert або toast.
pulse — не для постійного стану. Безперервний рух на краю зору заважає читати все інше; вимикайте хвилю, щойно подію побачили.

Доступність

Значок типово aria-hidden: число має бути в назві самої кнопки — label="Сповіщення: 3 непрочитаних". Текст поза кнопкою скрінрідер зачитав би окремим фрагментом, уже після «Сповіщення, кнопка», і зв'язку з нею користувач не почув би.

Якщо значок стоїть не на інтерактивному елементі (аватар у списку), передайте label — тоді він дає прихований текст замість aria-hidden.

Число понад max друкується як «99+», щоб значок не розростався на пів іконки. 0 і null ховають значок — батькові не треба обгортати компонент у v-if; для явного «0» є showZero.