Button
Основна кнопка дії з варіантами, розмірами та станом завантаження.
Кнопка — єдиний компонент, який є в усіх чотирьох вихідних проєктах, і скрізь написаний по-різному. Ця версія збирає рішення, кожне з яких закриває конкретний баг.
Приклад
Варіанти
solid — головна дія на екрані, і вона має бути одна. Решта — підпорядковані.
Розміри
Ієрархія зберігається на ОБОХ екранах: sm 8 / md 9 / lg 11 на десктопі,
9 / 10 / 12 на мобільному. Точність дотику тримає не висота, а невидима зона
45×45 навколо кнопки (W3C 2.5.8 Target Size) — вмикається лише на пристрої
з грубим вказівником (pointer-coarse), тому на телефоні дрібна sm-кнопка
в панелі списку лишається дрібною, але палець у неї влучає.
Завантаження
Індикатор позиційований абсолютно, а вміст лише гасне до opacity-0. Кнопка
не змінює ширину посеред запиту, тож сусідні елементи не стрибають.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
type | buttonsubmitreset | "button" | Тип нативної кнопки. Ігнорується, коли задано `to`. |
size | mdsmlgiconicon-sm | "md" | Висота кнопки. На мобільному ієрархія лишається: `sm` 9, `md` 10, `lg` 12 (у rem за кореня 15px), а точність дотику тримає невидима зона 44×44 (`pointer-coarse:`, див. нижче). `icon` і `icon-sm` — квадратні, для кнопок без тексту. |
variant | linkdangersolidsoftoutlineghost | "solid" | Візуальна вага. `solid` — головна дія на екрані, вона має бути одна. `link` — виглядає як посилання в тексті, але лишається кнопкою: «Показати ще», «Скинути фільтри» посеред абзацу чи підвалу картки. |
title | string | — | Нативна підказка при наведенні. Не замінює `label` для скрінрідера. |
label | string | — | Доступна назва. ОБОВ'ЯЗКОВИЙ для кнопок без тексту — інакше кнопка для скрінрідера безіменна. |
to | string | Record<string, unknown> | — | Робить кнопку посиланням: корінь стає `NuxtLink` замість `button`. Потрібно, коли дія веде на іншу сторінку — інакше зникає середній клік, Ctrl+клік і пункт «відкрити в новій вкладці». |
loading | boolean | — | Блокує кліки й показує індикатор, зберігаючи ширину кнопки. |
disabled | boolean | — | Блокує кліки. На відміну від `loading`, не показує індикатора. |
block | boolean | — | Розтягує кнопку на всю ширину контейнера. |
Події
| Назва | Payload | Опис |
|---|---|---|
click | [event: MouseEvent] | Клік по кнопці. Не спрацьовує, поки вона `disabled` або `loading`. |
Слоти
| Назва | Опис |
|---|---|
default | Вміст кнопки — зазвичай текст. |
leading | Іконка перед текстом. |
trailing | Іконка після тексту. |
Доступно через ref
| Назва | Тип | Опис |
|---|---|---|
focus | () => void | Ставить фокус на кнопку. Використовує ConfirmDialog. |
Коли використовувати
Для дій, що щось змінюють: надіслати форму, зберегти, видалити.
Якщо дія веде на іншу сторінку — передайте to. Корінь стане NuxtLink,
і повернеться середній клік, Ctrl+клік та «відкрити в новій вкладці», яких
у <button @click="navigateTo(...)"> немає.
Коли НЕ використовувати
Не ставте variant="solid" двом кнопкам поруч: якщо головні обидві, то
головної немає жодної.
Для кнопок без тексту обов'язковий label — інакше кнопка для скрінрідера
безіменна.
Доступність
Фокус-кільце видиме: focus-visible:ring-2 на токені --ring, з
ring-offset, який відриває кільце від заливки. У вихідних проєктах
focus:outline-none стоїть майже всюди без заміни — керування з
клавіатури там сліпе.
Під час завантаження кнопка отримує aria-busy, а кліки блокуються і на
рівні обробника, і через pointer-events-none.