Button

Основна кнопка дії з варіантами, розмірами та станом завантаження.

Кнопка — єдиний компонент, який є в усіх чотирьох вихідних проєктах, і скрізь написаний по-різному. Ця версія збирає рішення, кожне з яких закриває конкретний баг.

Приклад

Варіанти

solid — головна дія на екрані, і вона має бути одна. Решта — підпорядковані.

Завантаження

Індикатор позиційований абсолютно, а вміст лише гасне до opacity-0. Кнопка не змінює ширину посеред запиту, тож сусідні елементи не стрибають.

API

Props

Назва	Тип	Типово	Опис
`type`	buttonsubmitreset	`"button"`	Тип нативної кнопки. Ігнорується, коли задано `to`.
`size`	mdsmlgiconicon-sm	`"md"`	Розмір. `icon` і `icon-sm` — квадратні, для кнопок без тексту.
`variant`	dangersolidsoftoutlineghost	`"solid"`	Візуальна вага. `solid` — головна дія на екрані, вона має бути одна.
`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.