[{"data":1,"prerenderedAt":688},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Fbutton":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":23,"body":135,"description":681,"extension":682,"meta":683,"navigation":684,"path":22,"section":11,"seo":685,"stem":686,"__hash__":687},"pkg\u002Fpkg\u002Fbutton.md",{"type":136,"value":137,"toc":668},"minimark",[138,151,154,159,198,202,232,236,241,266,322,324,328,375,379,394,397,400,412,414,418,421,427,636,642,664],[139,140,141,142,146,147,150],"p",{},"A button for actions. Pass ",[143,144,145],"code",{},"to"," for an internal link or ",[143,148,149],{},"href"," for an external one. Hover and focus reveal an arrow: right when it stays on the site, up-right when it leaves.",[152,153],"base-button-demo",{},[155,156,158],"h2",{"id":157},"usage-guidelines","Usage guidelines",[160,161,162,182],"ul",{},[163,164,165,169,170,173,174,177,178,181],"li",{},[166,167,168],"strong",{},"Submit buttons:"," Unlike a native ",[143,171,172],{},"\u003Cbutton>",", this component defaults to ",[143,175,176],{},"type=\"button\"",". Pass ",[143,179,180],{},"type=\"submit\""," for it to submit a form.",[163,183,184,187,188,190,191,194,195,197],{},[166,185,186],{},"Links:"," ",[143,189,145],{}," renders a ",[143,192,193],{},"NuxtLink"," and shows an arrow right on hover. ",[143,196,149],{}," renders an external link and shows an arrow up-right. A plain button uses the arrow right.",[155,199,201],{"id":200},"anatomy","Anatomy",[203,204,209],"pre",{"className":205,"code":206,"language":207,"meta":208,"style":208},"language-vue shiki shiki-themes github-light github-dark","\u003CUiButton>Submit\u003C\u002FUiButton>\n","vue","",[143,210,211],{"__ignoreMap":208},[212,213,216,220,224,227,229],"span",{"class":214,"line":215},"line",1,[212,217,219],{"class":218},"sVt8B","\u003C",[212,221,223],{"class":222},"s9eBZ","UiButton",[212,225,226],{"class":218},">Submit\u003C\u002F",[212,228,223],{"class":222},[212,230,231],{"class":218},">\n",[155,233,235],{"id":234},"examples","Examples",[237,238,240],"h3",{"id":239},"rendering-as-another-tag","Rendering as another tag",[139,242,243,244,247,248,251,252,255,256,259,260,262,263,265],{},"The button can stay keyboard accessible as another tag, such as a ",[143,245,246],{},"div",", with ",[143,249,250],{},"nativeButton"," set to ",[143,253,254],{},"false"," (and ",[143,257,258],{},"as"," if you need ",[143,261,246],{}," instead of ",[143,264,212],{},").",[203,267,269],{"className":205,"code":268,"language":207,"meta":208,"style":208},"\u003CUiButton :native-button=\"false\" as=\"div\">\n  Button that can contain complex children\n\u003C\u002FUiButton>\n",[143,270,271,306,312],{"__ignoreMap":208},[212,272,273,275,277,280,284,287,291,294,296,299,301,304],{"class":214,"line":215},[212,274,219],{"class":218},[212,276,223],{"class":222},[212,278,279],{"class":218}," :",[212,281,283],{"class":282},"sScJk","native-button",[212,285,286],{"class":218},"=",[212,288,290],{"class":289},"sZZnC","\"",[212,292,254],{"class":293},"sj4cs",[212,295,290],{"class":289},[212,297,298],{"class":282}," as",[212,300,286],{"class":218},[212,302,303],{"class":289},"\"div\"",[212,305,231],{"class":218},[212,307,309],{"class":214,"line":308},2,[212,310,311],{"class":218},"  Button that can contain complex children\n",[212,313,315,318,320],{"class":214,"line":314},3,[212,316,317],{"class":218},"\u003C\u002F",[212,319,223],{"class":222},[212,321,231],{"class":218},[152,323],{"variant":258},[237,325,327],{"id":326},"links","Links",[203,329,331],{"className":205,"code":330,"language":207,"meta":208,"style":208},"\u003CUiButton to=\"\u002Fmethod\">Method\u003C\u002FUiButton>\n\u003CUiButton href=\"https:\u002F\u002Fexample.com\">Example\u003C\u002FUiButton>\n",[143,332,333,354],{"__ignoreMap":208},[212,334,335,337,339,342,344,347,350,352],{"class":214,"line":215},[212,336,219],{"class":218},[212,338,223],{"class":222},[212,340,341],{"class":282}," to",[212,343,286],{"class":218},[212,345,346],{"class":289},"\"\u002Fmethod\"",[212,348,349],{"class":218},">Method\u003C\u002F",[212,351,223],{"class":222},[212,353,231],{"class":218},[212,355,356,358,360,363,365,368,371,373],{"class":214,"line":308},[212,357,219],{"class":218},[212,359,223],{"class":222},[212,361,362],{"class":282}," href",[212,364,286],{"class":218},[212,366,367],{"class":289},"\"https:\u002F\u002Fexample.com\"",[212,369,370],{"class":218},">Example\u003C\u002F",[212,372,223],{"class":222},[212,374,231],{"class":218},[237,376,378],{"id":377},"loading-states","Loading states",[139,380,381,382,385,386,389,390,393],{},"For a button that goes into a loading state after activation, set ",[143,383,384],{},"focusableWhenDisabled"," so focus stays on it while ",[143,387,388],{},"disabled",". Use ",[143,391,392],{},"aria-labelledby"," on a labeled child so the changing text is the accessible name.",[152,395],{"variant":396},"loading",[237,398,399],{"id":388},"Disabled",[139,401,402,404,405,408,409,411],{},[143,403,388],{}," sets ",[143,406,407],{},"data-disabled"," and ignores presses. Add ",[143,410,384],{}," if it should remain in the tab order.",[152,413],{"variant":388},[155,415,417],{"id":416},"api-reference","API reference",[237,419,23],{"id":420},"button",[139,422,423,424,426],{},"A button that triggers an action. Renders a ",[143,425,172],{}," by default.",[428,429,430,449],"table",{},[431,432,433],"thead",{},[434,435,436,440,443,446],"tr",{},[437,438,439],"th",{},"Prop",[437,441,442],{},"Type",[437,444,445],{},"Default",[437,447,448],{},"Description",[450,451,452,477,501,516,542,566,583,605,621],"tbody",{},[434,453,454,460,465,470],{},[455,456,457],"td",{},[143,458,459],{},"type",[455,461,462],{},[143,463,464],{},"'button' | 'submit' | 'reset'",[455,466,467],{},[143,468,469],{},"'button'",[455,471,472,473,476],{},"Native type. Must be ",[143,474,475],{},"submit"," to submit a form.",[434,478,479,483,488,491],{},[455,480,481],{},[143,482,388],{},[455,484,485],{},[143,486,487],{},"boolean",[455,489,490],{},"—",[455,492,493,494,496,497,500],{},"Ignore presses. Sets ",[143,495,407],{}," and ",[143,498,499],{},"aria-disabled",".",[434,502,503,507,511,513],{},[455,504,505],{},[143,506,384],{},[455,508,509],{},[143,510,487],{},[455,512,490],{},[455,514,515],{},"Keep the button focusable while disabled (for loading).",[434,517,518,522,526,531],{},[455,519,520],{},[143,521,250],{},[455,523,524],{},[143,525,487],{},[455,527,528],{},[143,529,530],{},"true",[455,532,533,534,536,537,539,540,500],{},"Render a native ",[143,535,172],{},". Set ",[143,538,254],{}," when using ",[143,541,258],{},[434,543,544,548,553,558],{},[455,545,546],{},[143,547,258],{},[455,549,550],{},[143,551,552],{},"'button' | 'span' | 'div'",[455,554,555],{},[143,556,557],{},"'span'",[455,559,560,561,563,564,500],{},"Tag to render when ",[143,562,250],{}," is ",[143,565,254],{},[434,567,568,573,578,580],{},[455,569,570],{},[143,571,572],{},"color",[455,574,575],{},[143,576,577],{},"'blue' | 'orange' | 'pink' | 'violet' | 'green' | 'cyan'",[455,579,490],{},[455,581,582],{},"Wash used for the fill. Omitted uses the neutral wash.",[434,584,585,590,594,598],{},[455,586,587],{},[143,588,589],{},"cta",[455,591,592],{},[143,593,487],{},[455,595,596],{},[143,597,254],{},[455,599,600,601,604],{},"Rest on the stronger wash step. ",[143,602,603],{},"class=\"cta\""," does the same.",[434,606,607,611,616,618],{},[455,608,609],{},[143,610,145],{},[455,612,613],{},[143,614,615],{},"string",[455,617,490],{},[455,619,620],{},"Internal link. Hover shows an arrow right.",[434,622,623,627,631,633],{},[455,624,625],{},[143,626,149],{},[455,628,629],{},[143,630,615],{},[455,632,490],{},[455,634,635],{},"External link. Hover shows an arrow up-right.",[139,637,638,639,641],{},"There is no border. Hover and focus change the wash lightness. Extra attributes such as ",[143,640,392],{}," fall through to the element.",[428,643,644,653],{},[431,645,646],{},[434,647,648,651],{},[437,649,650],{},"Attribute",[437,652,448],{},[450,654,655],{},[434,656,657,661],{},[455,658,659],{},[143,660,407],{},[455,662,663],{},"Present when the button is disabled.",[665,666,667],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":208,"searchDepth":308,"depth":308,"links":669},[670,671,672,678],{"id":157,"depth":308,"text":158},{"id":200,"depth":308,"text":201},{"id":234,"depth":308,"text":235,"children":673},[674,675,676,677],{"id":239,"depth":314,"text":240},{"id":326,"depth":314,"text":327},{"id":377,"depth":314,"text":378},{"id":388,"depth":314,"text":399},{"id":416,"depth":308,"text":417,"children":679},[680],{"id":420,"depth":314,"text":23},"A button that can trigger an action","md",{},true,{"title":23,"description":681},"pkg\u002Fbutton","snhW9UEndhUAyI7wMrkgBMJ9T09Xnb2gUv9Ajug93fU",1791043754644]