[{"data":1,"prerenderedAt":304},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fbutton":3,"component-meta:UiButton":186},{"id":4,"title":5,"body":6,"component":172,"dependsOn":173,"description":175,"emitDescriptions":176,"extension":49,"meta":178,"navigation":179,"order":180,"path":181,"seo":182,"status":183,"stem":184,"__hash__":185},"docs\u002Fdocs\u002Fcomponents\u002Fbutton.md","Button",{"type":7,"value":8,"toc":160},"minimark",[9,13,18,22,26,33,36,40,62,65,69,76,79,83,86,90,93,108,112,119,126,130,149],[10,11,12],"p",{},"Кнопка — єдиний компонент, який є в усіх чотирьох вихідних проєктах, і\nскрізь написаний по-різному. Ця версія збирає рішення, кожне з яких\nзакриває конкретний баг.",[14,15,17],"h2",{"id":16},"приклад","Приклад",[19,20],"component-preview",{"name":21},"button-basic",[14,23,25],{"id":24},"варіанти","Варіанти",[10,27,28,32],{},[29,30,31],"code",{},"solid"," — головна дія на екрані, і вона має бути одна. Решта — підпорядковані.",[19,34],{"name":35},"button-variants",[14,37,39],{"id":38},"розміри","Розміри",[10,41,42,43,46,47,50,51,54,55,58,59,61],{},"Ієрархія зберігається на ОБОХ екранах: ",[29,44,45],{},"sm"," 8 \u002F ",[29,48,49],{},"md"," 9 \u002F ",[29,52,53],{},"lg"," 11 на десктопі,\n9 \u002F 10 \u002F 12 на мобільному. Точність дотику тримає не висота, а невидима зона\n45×45 навколо кнопки (W3C 2.5.8 Target Size) — вмикається лише на пристрої\nз грубим вказівником (",[29,56,57],{},"pointer-coarse","), тому на телефоні дрібна ",[29,60,45],{},"-кнопка\nв панелі списку лишається дрібною, але палець у неї влучає.",[19,63],{"name":64},"button-sizes",[14,66,68],{"id":67},"завантаження","Завантаження",[10,70,71,72,75],{},"Індикатор позиційований абсолютно, а вміст лише гасне до ",[29,73,74],{},"opacity-0",". Кнопка\nне змінює ширину посеред запиту, тож сусідні елементи не стрибають.",[19,77],{"name":78},"button-loading",[14,80,82],{"id":81},"api","API",[84,85],"component-api",{},[14,87,89],{"id":88},"коли-використовувати","Коли використовувати",[10,91,92],{},"Для дій, що щось змінюють: надіслати форму, зберегти, видалити.",[10,94,95,96,99,100,103,104,107],{},"Якщо дія веде на іншу сторінку — передайте ",[29,97,98],{},"to",". Корінь стане ",[29,101,102],{},"NuxtLink",",\nі повернеться середній клік, Ctrl+клік та «відкрити в новій вкладці», яких\nу ",[29,105,106],{},"\u003Cbutton @click=\"navigateTo(...)\">"," немає.",[14,109,111],{"id":110},"коли-не-використовувати","Коли НЕ використовувати",[10,113,114,115,118],{},"Не ставте ",[29,116,117],{},"variant=\"solid\""," двом кнопкам поруч: якщо головні обидві, то\nголовної немає жодної.",[10,120,121,122,125],{},"Для кнопок без тексту обов'язковий ",[29,123,124],{},"label"," — інакше кнопка для скрінрідера\nбезіменна.",[14,127,129],{"id":128},"доступність","Доступність",[10,131,132,133,136,137,140,141,144,145,148],{},"Фокус-кільце видиме: ",[29,134,135],{},"focus-visible:ring-2"," на токені ",[29,138,139],{},"--ring",", з\n",[29,142,143],{},"ring-offset",", який відриває кільце від заливки. У вихідних проєктах\n",[29,146,147],{},"focus:outline-none"," стоїть майже всюди без заміни — керування з\nклавіатури там сліпе.",[10,150,151,152,155,156,159],{},"Під час завантаження кнопка отримує ",[29,153,154],{},"aria-busy",", а кліки блокуються і на\nрівні обробника, і через ",[29,157,158],{},"pointer-events-none",".",{"title":161,"searchDepth":162,"depth":162,"links":163},"",2,[164,165,166,167,168,169,170,171],{"id":16,"depth":162,"text":17},{"id":24,"depth":162,"text":25},{"id":38,"depth":162,"text":39},{"id":67,"depth":162,"text":68},{"id":81,"depth":162,"text":82},{"id":88,"depth":162,"text":89},{"id":110,"depth":162,"text":111},{"id":128,"depth":162,"text":129},"UiButton",[174],"app\u002Fcomponents\u002Fui\u002FUiLoadingDots.vue","Основна кнопка дії з варіантами, розмірами та станом завантаження.",{"click":177},"Клік по кнопці. Не спрацьовує, поки вона `disabled` або `loading`.",{},true,1,"\u002Fdocs\u002Fcomponents\u002Fbutton",{"title":5,"description":175},"stable","docs\u002Fcomponents\u002Fbutton","UtlfYSLMUaBj2ByyNngRhWXNwjmi6Xrieqw9InJJ0QA",{"mode":187,"prefetch":188,"preload":188,"filePath":189,"declarationPath":190,"pascalName":172,"kebabName":191,"chunkName":192,"priority":180,"_scanned":179,"meta":193},"all",false,"app\u002Fcomponents\u002Fui\u002FUiButton.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiButton.vue","ui-button","components\u002Fui-button",{"type":180,"props":194,"slots":267,"events":281,"exposed":294,"hash":303},[195,206,218,231,236,239,246,255,261],{"name":196,"global":188,"default":197,"description":198,"tags":199,"required":188,"type":200,"schema":201},"type","\"button\"","Тип нативної кнопки. Ігнорується, коли задано `to`.",[],"\"button\" | \"submit\" | \"reset\"",{"kind":202,"type":200,"schema":203},"enum",{"0":197,"1":204,"2":205},"\"submit\"","\"reset\"",{"name":207,"global":188,"default":208,"description":209,"tags":210,"required":188,"type":211,"schema":212},"size","\"md\"","Висота кнопки. На мобільному ієрархія лишається: `sm` 9, `md` 10,\n`lg` 12 (у rem за кореня 15px), а точність дотику тримає невидима\nзона 44×44 (`pointer-coarse:`, див. нижче). `icon` і `icon-sm` —\nквадратні, для кнопок без тексту.",[],"\"md\" | \"sm\" | \"lg\" | \"icon\" | \"icon-sm\"",{"kind":202,"type":211,"schema":213},{"0":208,"1":214,"2":215,"3":216,"4":217},"\"sm\"","\"lg\"","\"icon\"","\"icon-sm\"",{"name":219,"global":188,"default":220,"description":221,"tags":222,"required":188,"type":223,"schema":224},"variant","\"solid\"","Візуальна вага. `solid` — головна дія на екрані, вона має бути одна.\n`link` — виглядає як посилання в тексті, але лишається кнопкою:\n«Показати ще», «Скинути фільтри» посеред абзацу чи підвалу картки.",[],"\"link\" | \"danger\" | \"solid\" | \"soft\" | \"outline\" | \"ghost\"",{"kind":202,"type":223,"schema":225},{"0":226,"1":227,"2":220,"3":228,"4":229,"5":230},"\"link\"","\"danger\"","\"soft\"","\"outline\"","\"ghost\"",{"name":232,"global":188,"description":233,"tags":234,"required":188,"type":235,"schema":235},"title","Нативна підказка при наведенні. Не замінює `label` для скрінрідера.",[],"string",{"name":124,"global":188,"description":237,"tags":238,"required":188,"type":235,"schema":235},"Доступна назва. ОБОВ'ЯЗКОВИЙ для кнопок без тексту — інакше кнопка\nдля скрінрідера безіменна.",[],{"name":98,"global":188,"description":240,"tags":241,"required":188,"type":242,"schema":243},"Робить кнопку посиланням: корінь стає `NuxtLink` замість `button`.\nПотрібно, коли дія веде на іншу сторінку — інакше зникає\nсередній клік, Ctrl+клік і пункт «відкрити в новій вкладці».",[],"string | Record\u003Cstring, unknown>",{"kind":202,"type":242,"schema":244},{"0":235,"1":245},"Record\u003Cstring, unknown>",{"name":247,"global":188,"description":248,"tags":249,"required":188,"type":250,"schema":251},"loading","Блокує кліки й показує індикатор, зберігаючи ширину кнопки.",[],"boolean",{"kind":202,"type":250,"schema":252},{"0":253,"1":254},"false","true",{"name":256,"global":188,"description":257,"tags":258,"required":188,"type":250,"schema":259},"disabled","Блокує кліки. На відміну від `loading`, не показує індикатора.",[],{"kind":202,"type":250,"schema":260},{"0":253,"1":254},{"name":262,"global":188,"description":263,"tags":264,"required":188,"type":250,"schema":265},"block","Розтягує кнопку на всю ширину контейнера.",[],{"kind":202,"type":250,"schema":266},{"0":253,"1":254},[268,273,277],{"name":269,"type":270,"description":271,"tags":272,"schema":270},"default","any","Вміст кнопки — зазвичай текст.",[],{"name":274,"type":270,"description":275,"tags":276,"schema":270},"leading","Іконка перед текстом.",[],{"name":278,"type":270,"description":279,"tags":280,"schema":270},"trailing","Іконка після тексту.",[],[282],{"name":283,"description":161,"tags":284,"type":285,"signature":286,"schema":287},"click",[],"[event: MouseEvent]","(event: \"click\", event: MouseEvent): void",[288],{"kind":289,"type":290,"schema":291},"object","MouseEvent",{"name":196,"global":188,"description":292,"tags":293,"required":179,"type":235,"schema":235},"The **`type`** read-only property of the Event interface returns a string containing the event's type.\n\n[MDN Reference](https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FEvent\u002Ftype)",[],[295],{"name":296,"type":297,"description":298,"tags":299,"schema":300},"focus","() => void","Ставить фокус на кнопку. Використовує ConfirmDialog.",[],{"kind":301,"type":302},"event","(): void","icyzdEy0xSv3khqhholuw774C6cJgMMBWt1PmWr3jSQ",1789660506369]