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