[{"data":1,"prerenderedAt":842},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-button":12,"i-ph:code":836,"i-ph:caret-down":838,"i-ph:plus":840},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":830,"meta":831,"navigation":104,"path":832,"seo":833,"stem":834,"__hash__":835},"docs\u002Fdocs\u002Fcomponents\u002Fbutton.md","Button",{"type":16,"value":17,"toc":823},"minimark",[18,22,26,270,275,494,498,557,561,575,579,584,743,747,750,819],[19,20,14],"h1",{"id":21},"button",[23,24,25],"p",{},"A button component that supports various styles, sizes, and states. It can be used as a standard button or as a link.",[27,28,30],"button-example",{"source-path":29},"Button\u002FButton.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Button } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButton variant=\"fill\" class=\"mb-xs\">\n    Primary Button\n  \u003C\u002FButton>\n  \u003CButton variant=\"gray\" class=\"mb-xs\">\n    Secondary Button\n  \u003C\u002FButton>\n  \u003CButton variant=\"fill\" loading class=\"mb-xs\">\n    Loading\n  \u003C\u002FButton>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,89,99,106,116,152,159,169,199,205,214,246,252,261],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,82,86],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Button",[41,73,74],{"class":47}," }",[41,76,77],{"class":51}," from",[41,79,81],{"class":80},"sBR95"," '",[41,83,85],{"class":84},"sfmH-","@dolanske\u002Fvui",[41,87,88],{"class":80},"'\n",[41,90,92,95,97],{"class":43,"line":91},3,[41,93,94],{"class":47},"\u003C\u002F",[41,96,52],{"class":51},[41,98,59],{"class":47},[41,100,102],{"class":43,"line":101},4,[41,103,105],{"emptyLinePlaceholder":104},true,"\n",[41,107,109,111,114],{"class":43,"line":108},5,[41,110,48],{"class":47},[41,112,113],{"class":51},"template",[41,115,59],{"class":47},[41,117,119,122,124,127,130,133,136,138,141,143,145,148,150],{"class":43,"line":118},6,[41,120,121],{"class":47},"  \u003C",[41,123,14],{"class":51},[41,125,126],{"class":55}," variant",[41,128,129],{"class":47},"=",[41,131,132],{"class":80},"\"",[41,134,135],{"class":84},"fill",[41,137,132],{"class":80},[41,139,140],{"class":55}," class",[41,142,129],{"class":47},[41,144,132],{"class":80},[41,146,147],{"class":84},"mb-xs",[41,149,132],{"class":80},[41,151,59],{"class":47},[41,153,155],{"class":43,"line":154},7,[41,156,158],{"class":157},"sX1ls","    Primary Button\n",[41,160,162,165,167],{"class":43,"line":161},8,[41,163,164],{"class":47},"  \u003C\u002F",[41,166,14],{"class":51},[41,168,59],{"class":47},[41,170,172,174,176,178,180,182,185,187,189,191,193,195,197],{"class":43,"line":171},9,[41,173,121],{"class":47},[41,175,14],{"class":51},[41,177,126],{"class":55},[41,179,129],{"class":47},[41,181,132],{"class":80},[41,183,184],{"class":84},"gray",[41,186,132],{"class":80},[41,188,140],{"class":55},[41,190,129],{"class":47},[41,192,132],{"class":80},[41,194,147],{"class":84},[41,196,132],{"class":80},[41,198,59],{"class":47},[41,200,202],{"class":43,"line":201},10,[41,203,204],{"class":157},"    Secondary Button\n",[41,206,208,210,212],{"class":43,"line":207},11,[41,209,164],{"class":47},[41,211,14],{"class":51},[41,213,59],{"class":47},[41,215,217,219,221,223,225,227,229,231,234,236,238,240,242,244],{"class":43,"line":216},12,[41,218,121],{"class":47},[41,220,14],{"class":51},[41,222,126],{"class":55},[41,224,129],{"class":47},[41,226,132],{"class":80},[41,228,135],{"class":84},[41,230,132],{"class":80},[41,232,233],{"class":55}," loading",[41,235,140],{"class":55},[41,237,129],{"class":47},[41,239,132],{"class":80},[41,241,147],{"class":84},[41,243,132],{"class":80},[41,245,59],{"class":47},[41,247,249],{"class":43,"line":248},13,[41,250,251],{"class":157},"    Loading\n",[41,253,255,257,259],{"class":43,"line":254},14,[41,256,164],{"class":47},[41,258,14],{"class":51},[41,260,59],{"class":47},[41,262,264,266,268],{"class":43,"line":263},15,[41,265,94],{"class":47},[41,267,113],{"class":51},[41,269,59],{"class":47},[271,272,274],"h3",{"id":273},"props","Props",[276,277,278,294],"table",{},[279,280,281],"thead",{},[282,283,284,288,291],"tr",{},[285,286,287],"th",{},"Name",[285,289,290],{},"Default",[285,292,293],{},"Type",[295,296,297,320,346,364,382,418,436,454,472],"tbody",{},[282,298,299,305,310],{},[300,301,302],"td",{},[38,303,304],{},"loading",[300,306,307],{},[38,308,309],{},"false",[300,311,312,315,316,319],{},[38,313,314],{},"boolean"," ",[317,318],"br",{}," Shows a loading spinner and disables the button",[282,321,322,327,332],{},[300,323,324],{},[38,325,326],{},"size",[300,328,329],{},[38,330,331],{},"'m'",[300,333,334,315,337,315,340,315,343,345],{},[38,335,336],{},"s",[38,338,339],{},"m",[38,341,342],{},"l",[317,344],{}," Controls the size of the button",[282,347,348,353,357],{},[300,349,350],{},[38,351,352],{},"expand",[300,354,355],{},[38,356,309],{},[300,358,359,315,361,363],{},[38,360,314],{},[317,362],{}," Makes the button expand to full width",[282,365,366,371,375],{},[300,367,368],{},[38,369,370],{},"square",[300,372,373],{},[38,374,309],{},[300,376,377,315,379,381],{},[38,378,314],{},[317,380],{}," Makes the button square instead of rectangular",[282,383,384,389,394],{},[300,385,386],{},[38,387,388],{},"variant",[300,390,391],{},[38,392,393],{},"'gray'",[300,395,396,315,398,315,401,315,404,315,407,315,410,315,413,315,415,417],{},[38,397,135],{},[38,399,400],{},"danger",[38,402,403],{},"success",[38,405,406],{},"link",[38,408,409],{},"accent",[38,411,412],{},"note",[38,414,184],{},[317,416],{}," Controls the button's appearance",[282,419,420,425,429],{},[300,421,422],{},[38,423,424],{},"outline",[300,426,427],{},[38,428,309],{},[300,430,431,315,433,435],{},[38,432,314],{},[317,434],{}," Makes the button outlined instead of filled",[282,437,438,443,447],{},[300,439,440],{},[38,441,442],{},"disabled",[300,444,445],{},[38,446,309],{},[300,448,449,315,451,453],{},[38,450,314],{},[317,452],{}," Disables the button",[282,455,456,461,465],{},[300,457,458],{},[38,459,460],{},"plain",[300,462,463],{},[38,464,309],{},[300,466,467,315,469,471],{},[38,468,314],{},[317,470],{}," Removes background and border, keeping only the text",[282,473,474,479,482],{},[300,475,476],{},[38,477,478],{},"href",[300,480,481],{},"—",[300,483,484,315,487,489,490,493],{},[38,485,486],{},"string",[317,488],{}," URL to navigate to. When provided, renders as an anchor (",[38,491,492],{},"a",") element",[271,495,497],{"id":496},"slots","Slots",[276,499,500,512],{},[279,501,502],{},[282,503,504,506,509],{},[285,505,287],{},[285,507,508],{},"Accepts",[285,510,511],{},"Description",[295,513,514,529,543],{},[282,515,516,521,526],{},[300,517,518],{},[38,519,520],{},"default",[300,522,523],{},[38,524,525],{},"any",[300,527,528],{},"The main content of the button",[282,530,531,536,540],{},[300,532,533],{},[38,534,535],{},"start",[300,537,538],{},[38,539,525],{},[300,541,542],{},"Content to be displayed before the main content",[282,544,545,550,554],{},[300,546,547],{},[38,548,549],{},"end",[300,551,552],{},[38,553,525],{},[300,555,556],{},"Content to be displayed after the main content",[271,558,560],{"id":559},"events","Events",[23,562,563,564,567,568,567,571,574],{},"The button component emits all standard button events like ",[38,565,566],{},"click",", ",[38,569,570],{},"focus",[38,572,573],{},"blur",", etc.",[271,576,578],{"id":577},"examples","Examples",[580,581,583],"h4",{"id":582},"custom-slots","Custom slots",[585,586,587],"button-slot-example",{},[31,588,590],{"className":33,"code":589,"language":35,"meta":36,"style":36},"\u003Cscript setup>\nimport { Button } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButton variant=\"fill\">\n    \u003Ctemplate #start>\n      \u003CIconPlus \u002F>\n    \u003C\u002Ftemplate>\n    Add Item\n    \u003Ctemplate #end>\n      \u003CIconCaretDown \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FButton>\n\u003C\u002Ftemplate>\n",[38,591,592,602,620,628,632,640,658,673,684,693,698,710,719,727,735],{"__ignoreMap":36},[41,593,594,596,598,600],{"class":43,"line":44},[41,595,48],{"class":47},[41,597,52],{"class":51},[41,599,56],{"class":55},[41,601,59],{"class":47},[41,603,604,606,608,610,612,614,616,618],{"class":43,"line":62},[41,605,65],{"class":51},[41,607,68],{"class":47},[41,609,71],{"class":55},[41,611,74],{"class":47},[41,613,77],{"class":51},[41,615,81],{"class":80},[41,617,85],{"class":84},[41,619,88],{"class":80},[41,621,622,624,626],{"class":43,"line":91},[41,623,94],{"class":47},[41,625,52],{"class":51},[41,627,59],{"class":47},[41,629,630],{"class":43,"line":101},[41,631,105],{"emptyLinePlaceholder":104},[41,633,634,636,638],{"class":43,"line":108},[41,635,48],{"class":47},[41,637,113],{"class":51},[41,639,59],{"class":47},[41,641,642,644,646,648,650,652,654,656],{"class":43,"line":118},[41,643,121],{"class":47},[41,645,14],{"class":51},[41,647,126],{"class":55},[41,649,129],{"class":47},[41,651,132],{"class":80},[41,653,135],{"class":84},[41,655,132],{"class":80},[41,657,59],{"class":47},[41,659,660,663,665,668,671],{"class":43,"line":154},[41,661,662],{"class":47},"    \u003C",[41,664,113],{"class":51},[41,666,667],{"class":47}," #",[41,669,535],{"class":670},"sRTv0",[41,672,59],{"class":47},[41,674,675,678,681],{"class":43,"line":161},[41,676,677],{"class":47},"      \u003C",[41,679,680],{"class":51},"IconPlus",[41,682,683],{"class":47}," \u002F>\n",[41,685,686,689,691],{"class":43,"line":171},[41,687,688],{"class":47},"    \u003C\u002F",[41,690,113],{"class":51},[41,692,59],{"class":47},[41,694,695],{"class":43,"line":201},[41,696,697],{"class":157},"    Add Item\n",[41,699,700,702,704,706,708],{"class":43,"line":207},[41,701,662],{"class":47},[41,703,113],{"class":51},[41,705,667],{"class":47},[41,707,549],{"class":670},[41,709,59],{"class":47},[41,711,712,714,717],{"class":43,"line":216},[41,713,677],{"class":47},[41,715,716],{"class":51},"IconCaretDown",[41,718,683],{"class":47},[41,720,721,723,725],{"class":43,"line":248},[41,722,688],{"class":47},[41,724,113],{"class":51},[41,726,59],{"class":47},[41,728,729,731,733],{"class":43,"line":254},[41,730,164],{"class":47},[41,732,14],{"class":51},[41,734,59],{"class":47},[41,736,737,739,741],{"class":43,"line":263},[41,738,94],{"class":47},[41,740,113],{"class":51},[41,742,59],{"class":47},[271,744,746],{"id":745},"tokens","Tokens",[23,748,749],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[276,751,752,763],{},[279,753,754],{},[282,755,756,759,761],{},[285,757,758],{},"Token",[285,760,290],{},[285,762,511],{},[295,764,765,783,801],{},[282,766,767,772,780],{},[300,768,769],{},[38,770,771],{},"--vui-button-height",[300,773,774],{},[492,775,777],{"href":776},"\u002Fdocs\u002Ftokens\u002Flayout#interactive-element-height",[38,778,779],{},"var(--interactive-el-height)",[300,781,782],{},"Button height",[282,784,785,790,798],{},[300,786,787],{},[38,788,789],{},"--vui-button-padding",[300,791,792],{},[492,793,795],{"href":794},"\u002Fdocs\u002Ftokens\u002Fspacing",[38,796,797],{},"var(--space-xs)",[300,799,800],{},"Horizontal padding",[282,802,803,808,816],{},[300,804,805],{},[38,806,807],{},"--vui-button-font-size",[300,809,810],{},[492,811,813],{"href":812},"\u002Fdocs\u002Ftokens\u002Ftext",[38,814,815],{},"var(--font-size-s)",[300,817,818],{},"Default font size",[820,821,822],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}",{"title":36,"searchDepth":62,"depth":62,"links":824},[825,826,827,828,829],{"id":273,"depth":91,"text":274},{"id":496,"depth":91,"text":497},{"id":559,"depth":91,"text":560},{"id":577,"depth":91,"text":578},{"id":745,"depth":91,"text":746},"md",{},"\u002Fdocs\u002Fcomponents\u002Fbutton",{"title":14,"description":25},"docs\u002Fcomponents\u002Fbutton","PoWTcc0Oknr2ycVZZkr8p6W0VvWHKzZfiWrcdZqZZgU",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":837},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":839},"\u003Cpath fill=\"currentColor\" d=\"m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":841},"\u003Cpath fill=\"currentColor\" d=\"M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8\"\u002F>",1782200882436]