[{"data":1,"prerenderedAt":1545},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-button":273,"-colorffy-ui-components-button-surround":1540},[4,21,115],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,268],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,204,209,214,218,223,228,233,238,243,248,253,258,263],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F09.card","i-lucide-square",{"title":181,"path":182,"stem":183,"icon":184},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F10.datatable","i-lucide-table",{"title":186,"path":187,"stem":188,"icon":189},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F11.empty","i-lucide-inbox",{"title":191,"path":192,"stem":193,"icon":194},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F12.icons","i-lucide-shapes",{"title":196,"path":197,"stem":198,"icon":199},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F13.inputs","i-lucide-text-cursor-input",{"title":79,"path":201,"stem":202,"icon":203},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F14.layout","i-lucide-layout",{"title":205,"path":206,"stem":207,"icon":208},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F15.list","i-lucide-list",{"title":210,"path":211,"stem":212,"icon":213},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F16.loading","i-lucide-loader-circle",{"title":215,"path":216,"stem":217,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F17.modal",{"title":219,"path":220,"stem":221,"icon":222},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F18.navbar","i-lucide-panel-top",{"title":224,"path":225,"stem":226,"icon":227},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F19.navigation-bar","i-lucide-navigation",{"title":229,"path":230,"stem":231,"icon":232},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F20.popover","i-lucide-message-square",{"title":234,"path":235,"stem":236,"icon":237},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F21.popover-menu","i-lucide-ellipsis",{"title":239,"path":240,"stem":241,"icon":242},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F22.progress","i-lucide-loader",{"title":244,"path":245,"stem":246,"icon":247},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F23.segmented-controls","i-lucide-toggle-left",{"title":249,"path":250,"stem":251,"icon":252},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F24.sidebar","i-lucide-panel-left",{"title":254,"path":255,"stem":256,"icon":257},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F25.skeleton","i-lucide-square-dashed",{"title":259,"path":260,"stem":261,"icon":262},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F26.tabs","i-lucide-panels-top-left",{"title":264,"path":265,"stem":266,"icon":267},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F27.tooltip","i-lucide-message-circle",{"title":269,"path":270,"stem":271,"icon":272},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"id":274,"title":161,"body":275,"description":1533,"extension":1534,"links":1535,"meta":1536,"navigation":1537,"path":162,"seo":1538,"stem":163,"__hash__":1539},"docs\u002F3.colorffy-ui\u002F2.components\u002F06.button.md",{"type":276,"value":277,"toc":1524},"minimark",[278,298,303,389,393,587,591,732,736,951,955,966,1093,1097,1225,1229,1473,1501,1520],[279,280,281,285,286,289,290,293,294,297],"p",{},[282,283,284],"code",{},"UiButton"," is the primary action trigger. Style it with ",[282,287,288],{},"variant",", color it with ",[282,291,292],{},"color",", and scale it with ",[282,295,296],{},"size",".",[299,300,302],"h2",{"id":301},"add-a-button","Add a button",[304,305,310],"pre",{"className":306,"code":307,"language":308,"meta":309,"style":309},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" color=\"primary\" text=\"Save\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[282,311,312,328,379],{"__ignoreMap":309},[313,314,317,321,325],"span",{"class":315,"line":316},"line",1,[313,318,320],{"class":319},"sMK4o","\u003C",[313,322,324],{"class":323},"swJcz","template",[313,326,327],{"class":319},">\n",[313,329,331,334,336,340,343,346,350,352,355,357,359,362,364,367,369,371,374,376],{"class":315,"line":330},2,[313,332,333],{"class":319},"  \u003C",[313,335,284],{"class":323},[313,337,339],{"class":338},"spNyl"," variant",[313,341,342],{"class":319},"=",[313,344,345],{"class":319},"\"",[313,347,349],{"class":348},"sfazB","filled",[313,351,345],{"class":319},[313,353,354],{"class":338}," color",[313,356,342],{"class":319},[313,358,345],{"class":319},[313,360,361],{"class":348},"primary",[313,363,345],{"class":319},[313,365,366],{"class":338}," text",[313,368,342],{"class":319},[313,370,345],{"class":319},[313,372,373],{"class":348},"Save",[313,375,345],{"class":319},[313,377,378],{"class":319}," \u002F>\n",[313,380,382,385,387],{"class":315,"line":381},3,[313,383,384],{"class":319},"\u003C\u002F",[313,386,324],{"class":323},[313,388,327],{"class":319},[299,390,392],{"id":391},"choose-a-variant","Choose a variant",[304,394,396],{"className":306,"code":395,"language":308,"meta":309,"style":309},"\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" text=\"Filled\" \u002F>\n  \u003CUiButton variant=\"tonal\" color=\"primary\" text=\"Tonal\" \u002F>\n  \u003CUiButton variant=\"outline\" text=\"Outline\" \u002F>\n  \u003CUiButton variant=\"text\" text=\"Text\" \u002F>\n  \u003CUiButton variant=\"gradient\" color=\"primary\" text=\"Gradient\" \u002F>\n\u003C\u002Ftemplate>\n",[282,397,398,406,435,475,506,537,578],{"__ignoreMap":309},[313,399,400,402,404],{"class":315,"line":316},[313,401,320],{"class":319},[313,403,324],{"class":323},[313,405,327],{"class":319},[313,407,408,410,412,414,416,418,420,422,424,426,428,431,433],{"class":315,"line":330},[313,409,333],{"class":319},[313,411,284],{"class":323},[313,413,339],{"class":338},[313,415,342],{"class":319},[313,417,345],{"class":319},[313,419,349],{"class":348},[313,421,345],{"class":319},[313,423,366],{"class":338},[313,425,342],{"class":319},[313,427,345],{"class":319},[313,429,430],{"class":348},"Filled",[313,432,345],{"class":319},[313,434,378],{"class":319},[313,436,437,439,441,443,445,447,450,452,454,456,458,460,462,464,466,468,471,473],{"class":315,"line":381},[313,438,333],{"class":319},[313,440,284],{"class":323},[313,442,339],{"class":338},[313,444,342],{"class":319},[313,446,345],{"class":319},[313,448,449],{"class":348},"tonal",[313,451,345],{"class":319},[313,453,354],{"class":338},[313,455,342],{"class":319},[313,457,345],{"class":319},[313,459,361],{"class":348},[313,461,345],{"class":319},[313,463,366],{"class":338},[313,465,342],{"class":319},[313,467,345],{"class":319},[313,469,470],{"class":348},"Tonal",[313,472,345],{"class":319},[313,474,378],{"class":319},[313,476,478,480,482,484,486,488,491,493,495,497,499,502,504],{"class":315,"line":477},4,[313,479,333],{"class":319},[313,481,284],{"class":323},[313,483,339],{"class":338},[313,485,342],{"class":319},[313,487,345],{"class":319},[313,489,490],{"class":348},"outline",[313,492,345],{"class":319},[313,494,366],{"class":338},[313,496,342],{"class":319},[313,498,345],{"class":319},[313,500,501],{"class":348},"Outline",[313,503,345],{"class":319},[313,505,378],{"class":319},[313,507,509,511,513,515,517,519,522,524,526,528,530,533,535],{"class":315,"line":508},5,[313,510,333],{"class":319},[313,512,284],{"class":323},[313,514,339],{"class":338},[313,516,342],{"class":319},[313,518,345],{"class":319},[313,520,521],{"class":348},"text",[313,523,345],{"class":319},[313,525,366],{"class":338},[313,527,342],{"class":319},[313,529,345],{"class":319},[313,531,532],{"class":348},"Text",[313,534,345],{"class":319},[313,536,378],{"class":319},[313,538,540,542,544,546,548,550,553,555,557,559,561,563,565,567,569,571,574,576],{"class":315,"line":539},6,[313,541,333],{"class":319},[313,543,284],{"class":323},[313,545,339],{"class":338},[313,547,342],{"class":319},[313,549,345],{"class":319},[313,551,552],{"class":348},"gradient",[313,554,345],{"class":319},[313,556,354],{"class":338},[313,558,342],{"class":319},[313,560,345],{"class":319},[313,562,361],{"class":348},[313,564,345],{"class":319},[313,566,366],{"class":338},[313,568,342],{"class":319},[313,570,345],{"class":319},[313,572,573],{"class":348},"Gradient",[313,575,345],{"class":319},[313,577,378],{"class":319},[313,579,581,583,585],{"class":315,"line":580},7,[313,582,384],{"class":319},[313,584,324],{"class":323},[313,586,327],{"class":319},[299,588,590],{"id":589},"apply-a-color","Apply a color",[304,592,594],{"className":306,"code":593,"language":308,"meta":309,"style":309},"\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" color=\"success\" text=\"Success\" \u002F>\n  \u003CUiButton variant=\"filled\" color=\"warning\" text=\"Warning\" \u002F>\n  \u003CUiButton variant=\"filled\" color=\"danger\" text=\"Danger\" \u002F>\n\u003C\u002Ftemplate>\n",[282,595,596,604,644,684,724],{"__ignoreMap":309},[313,597,598,600,602],{"class":315,"line":316},[313,599,320],{"class":319},[313,601,324],{"class":323},[313,603,327],{"class":319},[313,605,606,608,610,612,614,616,618,620,622,624,626,629,631,633,635,637,640,642],{"class":315,"line":330},[313,607,333],{"class":319},[313,609,284],{"class":323},[313,611,339],{"class":338},[313,613,342],{"class":319},[313,615,345],{"class":319},[313,617,349],{"class":348},[313,619,345],{"class":319},[313,621,354],{"class":338},[313,623,342],{"class":319},[313,625,345],{"class":319},[313,627,628],{"class":348},"success",[313,630,345],{"class":319},[313,632,366],{"class":338},[313,634,342],{"class":319},[313,636,345],{"class":319},[313,638,639],{"class":348},"Success",[313,641,345],{"class":319},[313,643,378],{"class":319},[313,645,646,648,650,652,654,656,658,660,662,664,666,669,671,673,675,677,680,682],{"class":315,"line":381},[313,647,333],{"class":319},[313,649,284],{"class":323},[313,651,339],{"class":338},[313,653,342],{"class":319},[313,655,345],{"class":319},[313,657,349],{"class":348},[313,659,345],{"class":319},[313,661,354],{"class":338},[313,663,342],{"class":319},[313,665,345],{"class":319},[313,667,668],{"class":348},"warning",[313,670,345],{"class":319},[313,672,366],{"class":338},[313,674,342],{"class":319},[313,676,345],{"class":319},[313,678,679],{"class":348},"Warning",[313,681,345],{"class":319},[313,683,378],{"class":319},[313,685,686,688,690,692,694,696,698,700,702,704,706,709,711,713,715,717,720,722],{"class":315,"line":477},[313,687,333],{"class":319},[313,689,284],{"class":323},[313,691,339],{"class":338},[313,693,342],{"class":319},[313,695,345],{"class":319},[313,697,349],{"class":348},[313,699,345],{"class":319},[313,701,354],{"class":338},[313,703,342],{"class":319},[313,705,345],{"class":319},[313,707,708],{"class":348},"danger",[313,710,345],{"class":319},[313,712,366],{"class":338},[313,714,342],{"class":319},[313,716,345],{"class":319},[313,718,719],{"class":348},"Danger",[313,721,345],{"class":319},[313,723,378],{"class":319},[313,725,726,728,730],{"class":315,"line":508},[313,727,384],{"class":319},[313,729,324],{"class":323},[313,731,327],{"class":319},[299,733,735],{"id":734},"size-state-and-width","Size, state, and width",[304,737,739],{"className":306,"code":738,"language":308,"meta":309,"style":309},"\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" size=\"sm\" text=\"Small\" \u002F>\n  \u003CUiButton variant=\"filled\" size=\"lg\" text=\"Large\" \u002F>\n  \u003CUiButton variant=\"filled\" :loading=\"true\" text=\"Saving\" \u002F>\n  \u003CUiButton variant=\"filled\" :disabled=\"true\" text=\"Disabled\" \u002F>\n  \u003CUiButton variant=\"filled\" fluid text=\"Full width\" \u002F>\n\u003C\u002Ftemplate>\n",[282,740,741,749,790,830,871,911,943],{"__ignoreMap":309},[313,742,743,745,747],{"class":315,"line":316},[313,744,320],{"class":319},[313,746,324],{"class":323},[313,748,327],{"class":319},[313,750,751,753,755,757,759,761,763,765,768,770,772,775,777,779,781,783,786,788],{"class":315,"line":330},[313,752,333],{"class":319},[313,754,284],{"class":323},[313,756,339],{"class":338},[313,758,342],{"class":319},[313,760,345],{"class":319},[313,762,349],{"class":348},[313,764,345],{"class":319},[313,766,767],{"class":338}," size",[313,769,342],{"class":319},[313,771,345],{"class":319},[313,773,774],{"class":348},"sm",[313,776,345],{"class":319},[313,778,366],{"class":338},[313,780,342],{"class":319},[313,782,345],{"class":319},[313,784,785],{"class":348},"Small",[313,787,345],{"class":319},[313,789,378],{"class":319},[313,791,792,794,796,798,800,802,804,806,808,810,812,815,817,819,821,823,826,828],{"class":315,"line":381},[313,793,333],{"class":319},[313,795,284],{"class":323},[313,797,339],{"class":338},[313,799,342],{"class":319},[313,801,345],{"class":319},[313,803,349],{"class":348},[313,805,345],{"class":319},[313,807,767],{"class":338},[313,809,342],{"class":319},[313,811,345],{"class":319},[313,813,814],{"class":348},"lg",[313,816,345],{"class":319},[313,818,366],{"class":338},[313,820,342],{"class":319},[313,822,345],{"class":319},[313,824,825],{"class":348},"Large",[313,827,345],{"class":319},[313,829,378],{"class":319},[313,831,832,834,836,838,840,842,844,846,849,851,853,856,858,860,862,864,867,869],{"class":315,"line":477},[313,833,333],{"class":319},[313,835,284],{"class":323},[313,837,339],{"class":338},[313,839,342],{"class":319},[313,841,345],{"class":319},[313,843,349],{"class":348},[313,845,345],{"class":319},[313,847,848],{"class":338}," :loading",[313,850,342],{"class":319},[313,852,345],{"class":319},[313,854,855],{"class":348},"true",[313,857,345],{"class":319},[313,859,366],{"class":338},[313,861,342],{"class":319},[313,863,345],{"class":319},[313,865,866],{"class":348},"Saving",[313,868,345],{"class":319},[313,870,378],{"class":319},[313,872,873,875,877,879,881,883,885,887,890,892,894,896,898,900,902,904,907,909],{"class":315,"line":508},[313,874,333],{"class":319},[313,876,284],{"class":323},[313,878,339],{"class":338},[313,880,342],{"class":319},[313,882,345],{"class":319},[313,884,349],{"class":348},[313,886,345],{"class":319},[313,888,889],{"class":338}," :disabled",[313,891,342],{"class":319},[313,893,345],{"class":319},[313,895,855],{"class":348},[313,897,345],{"class":319},[313,899,366],{"class":338},[313,901,342],{"class":319},[313,903,345],{"class":319},[313,905,906],{"class":348},"Disabled",[313,908,345],{"class":319},[313,910,378],{"class":319},[313,912,913,915,917,919,921,923,925,927,930,932,934,936,939,941],{"class":315,"line":539},[313,914,333],{"class":319},[313,916,284],{"class":323},[313,918,339],{"class":338},[313,920,342],{"class":319},[313,922,345],{"class":319},[313,924,349],{"class":348},[313,926,345],{"class":319},[313,928,929],{"class":338}," fluid",[313,931,366],{"class":338},[313,933,342],{"class":319},[313,935,345],{"class":319},[313,937,938],{"class":348},"Full width",[313,940,345],{"class":319},[313,942,378],{"class":319},[313,944,945,947,949],{"class":315,"line":580},[313,946,384],{"class":319},[313,948,324],{"class":323},[313,950,327],{"class":319},[299,952,954],{"id":953},"add-an-icon","Add an icon",[279,956,957,958,961,962,965],{},"Use the ",[282,959,960],{},"#icon"," slot; set ",[282,963,964],{},"iconTrailing"," to place it after the label:",[304,967,969],{"className":306,"code":968,"language":308,"meta":309,"style":309},"\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" text=\"Download\" :icon-trailing=\"true\">\n    \u003Ctemplate #icon>\n      \u003C!-- any Material Symbols code point -->\n      \u003CUiIconMaterial icon-code=\"\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUiButton>\n\u003C\u002Ftemplate>\n",[282,970,971,979,1019,1034,1040,1066,1075,1084],{"__ignoreMap":309},[313,972,973,975,977],{"class":315,"line":316},[313,974,320],{"class":319},[313,976,324],{"class":323},[313,978,327],{"class":319},[313,980,981,983,985,987,989,991,993,995,997,999,1001,1004,1006,1009,1011,1013,1015,1017],{"class":315,"line":330},[313,982,333],{"class":319},[313,984,284],{"class":323},[313,986,339],{"class":338},[313,988,342],{"class":319},[313,990,345],{"class":319},[313,992,349],{"class":348},[313,994,345],{"class":319},[313,996,366],{"class":338},[313,998,342],{"class":319},[313,1000,345],{"class":319},[313,1002,1003],{"class":348},"Download",[313,1005,345],{"class":319},[313,1007,1008],{"class":338}," :icon-trailing",[313,1010,342],{"class":319},[313,1012,345],{"class":319},[313,1014,855],{"class":348},[313,1016,345],{"class":319},[313,1018,327],{"class":319},[313,1020,1021,1024,1026,1029,1032],{"class":315,"line":381},[313,1022,1023],{"class":319},"    \u003C",[313,1025,324],{"class":323},[313,1027,1028],{"class":319}," #",[313,1030,1031],{"class":338},"icon",[313,1033,327],{"class":319},[313,1035,1036],{"class":315,"line":477},[313,1037,1039],{"class":1038},"sHwdD","      \u003C!-- any Material Symbols code point -->\n",[313,1041,1042,1045,1048,1051,1053,1055,1059,1062,1064],{"class":315,"line":508},[313,1043,1044],{"class":319},"      \u003C",[313,1046,1047],{"class":323},"UiIconMaterial",[313,1049,1050],{"class":338}," icon-code",[313,1052,342],{"class":319},[313,1054,345],{"class":319},[313,1056,1058],{"class":1057},"sTEyZ","&",[313,1060,1061],{"class":348},"#xf090;",[313,1063,345],{"class":319},[313,1065,378],{"class":319},[313,1067,1068,1071,1073],{"class":315,"line":539},[313,1069,1070],{"class":319},"    \u003C\u002F",[313,1072,324],{"class":323},[313,1074,327],{"class":319},[313,1076,1077,1080,1082],{"class":315,"line":580},[313,1078,1079],{"class":319},"  \u003C\u002F",[313,1081,284],{"class":323},[313,1083,327],{"class":319},[313,1085,1087,1089,1091],{"class":315,"line":1086},8,[313,1088,384],{"class":319},[313,1090,324],{"class":323},[313,1092,327],{"class":319},[299,1094,1096],{"id":1095},"group-buttons","Group buttons",[304,1098,1100],{"className":306,"code":1099,"language":308,"meta":309,"style":309},"\u003Ctemplate>\n  \u003CUiButtonGroup connected>\n    \u003CUiButton variant=\"outline\" text=\"Left\" \u002F>\n    \u003CUiButton variant=\"outline\" text=\"Middle\" \u002F>\n    \u003CUiButton variant=\"outline\" text=\"Right\" \u002F>\n  \u003C\u002FUiButtonGroup>\n\u003C\u002Ftemplate>\n",[282,1101,1102,1110,1122,1151,1180,1209,1217],{"__ignoreMap":309},[313,1103,1104,1106,1108],{"class":315,"line":316},[313,1105,320],{"class":319},[313,1107,324],{"class":323},[313,1109,327],{"class":319},[313,1111,1112,1114,1117,1120],{"class":315,"line":330},[313,1113,333],{"class":319},[313,1115,1116],{"class":323},"UiButtonGroup",[313,1118,1119],{"class":338}," connected",[313,1121,327],{"class":319},[313,1123,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1147,1149],{"class":315,"line":381},[313,1125,1023],{"class":319},[313,1127,284],{"class":323},[313,1129,339],{"class":338},[313,1131,342],{"class":319},[313,1133,345],{"class":319},[313,1135,490],{"class":348},[313,1137,345],{"class":319},[313,1139,366],{"class":338},[313,1141,342],{"class":319},[313,1143,345],{"class":319},[313,1145,1146],{"class":348},"Left",[313,1148,345],{"class":319},[313,1150,378],{"class":319},[313,1152,1153,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1176,1178],{"class":315,"line":477},[313,1154,1023],{"class":319},[313,1156,284],{"class":323},[313,1158,339],{"class":338},[313,1160,342],{"class":319},[313,1162,345],{"class":319},[313,1164,490],{"class":348},[313,1166,345],{"class":319},[313,1168,366],{"class":338},[313,1170,342],{"class":319},[313,1172,345],{"class":319},[313,1174,1175],{"class":348},"Middle",[313,1177,345],{"class":319},[313,1179,378],{"class":319},[313,1181,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1205,1207],{"class":315,"line":508},[313,1183,1023],{"class":319},[313,1185,284],{"class":323},[313,1187,339],{"class":338},[313,1189,342],{"class":319},[313,1191,345],{"class":319},[313,1193,490],{"class":348},[313,1195,345],{"class":319},[313,1197,366],{"class":338},[313,1199,342],{"class":319},[313,1201,345],{"class":319},[313,1203,1204],{"class":348},"Right",[313,1206,345],{"class":319},[313,1208,378],{"class":319},[313,1210,1211,1213,1215],{"class":315,"line":539},[313,1212,1079],{"class":319},[313,1214,1116],{"class":323},[313,1216,327],{"class":319},[313,1218,1219,1221,1223],{"class":315,"line":580},[313,1220,384],{"class":319},[313,1222,324],{"class":323},[313,1224,327],{"class":319},[299,1226,1228],{"id":1227},"props","Props",[1230,1231,1232,1251],"table",{},[1233,1234,1235],"thead",{},[1236,1237,1238,1242,1245,1248],"tr",{},[1239,1240,1241],"th",{},"Prop",[1239,1243,1244],{},"Type",[1239,1246,1247],{},"Default",[1239,1249,1250],{},"Description",[1252,1253,1254,1272,1291,1313,1329,1348,1365,1383,1401,1419,1440,1456],"tbody",{},[1236,1255,1256,1261,1266,1269],{},[1257,1258,1259],"td",{},[282,1260,521],{},[1257,1262,1263],{},[282,1264,1265],{},"string | null",[1257,1267,1268],{},"—",[1257,1270,1271],{},"Button label.",[1236,1273,1274,1278,1283,1288],{},[1257,1275,1276],{},[282,1277,288],{},[1257,1279,1280],{},[282,1281,1282],{},"'filled' | 'tonal' | 'outline' | 'text' | 'link' | 'chip' | 'cta' | 'gradient' | 'frosted'",[1257,1284,1285],{},[282,1286,1287],{},"'filled'",[1257,1289,1290],{},"Visual style.",[1236,1292,1293,1297,1302,1304],{},[1257,1294,1295],{},[282,1296,292],{},[1257,1298,1299],{},[282,1300,1301],{},"'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'white' | 'black' | 'transparent'",[1257,1303,1268],{},[1257,1305,1306,1307,1309,1310,1312],{},"Semantic color (with ",[282,1308,349],{}," \u002F ",[282,1311,449],{},").",[1236,1314,1315,1319,1324,1326],{},[1257,1316,1317],{},[282,1318,296],{},[1257,1320,1321],{},[282,1322,1323],{},"'sm' | 'md' | 'lg'",[1257,1325,1268],{},[1257,1327,1328],{},"Button size.",[1236,1330,1331,1335,1340,1345],{},[1257,1332,1333],{},[282,1334,1031],{},[1257,1336,1337],{},[282,1338,1339],{},"boolean",[1257,1341,1342],{},[282,1343,1344],{},"false",[1257,1346,1347],{},"Icon-only mode (no label required).",[1236,1349,1350,1354,1358,1362],{},[1257,1351,1352],{},[282,1353,964],{},[1257,1355,1356],{},[282,1357,1339],{},[1257,1359,1360],{},[282,1361,1344],{},[1257,1363,1364],{},"Place the icon after the label.",[1236,1366,1367,1372,1376,1380],{},[1257,1368,1369],{},[282,1370,1371],{},"loading",[1257,1373,1374],{},[282,1375,1339],{},[1257,1377,1378],{},[282,1379,1344],{},[1257,1381,1382],{},"Show a spinner and block interaction.",[1236,1384,1385,1390,1394,1398],{},[1257,1386,1387],{},[282,1388,1389],{},"disabled",[1257,1391,1392],{},[282,1393,1339],{},[1257,1395,1396],{},[282,1397,1344],{},[1257,1399,1400],{},"Disable the button.",[1236,1402,1403,1408,1412,1416],{},[1257,1404,1405],{},[282,1406,1407],{},"rounded",[1257,1409,1410],{},[282,1411,1339],{},[1257,1413,1414],{},[282,1415,1344],{},[1257,1417,1418],{},"Fully rounded shape.",[1236,1420,1421,1426,1430,1434],{},[1257,1422,1423],{},[282,1424,1425],{},"fluid",[1257,1427,1428],{},[282,1429,1339],{},[1257,1431,1432],{},[282,1433,1344],{},[1257,1435,1436,1437,1312],{},"Full-width (",[282,1438,1439],{},"btn-block",[1236,1441,1442,1447,1451,1453],{},[1257,1443,1444],{},[282,1445,1446],{},"tooltipText",[1257,1448,1449],{},[282,1450,1265],{},[1257,1452,1268],{},[1257,1454,1455],{},"Tooltip text.",[1236,1457,1458,1463,1468,1470],{},[1257,1459,1460],{},[282,1461,1462],{},"customClass",[1257,1464,1465],{},[282,1466,1467],{},"string | string[] | Record\u003Cstring, boolean> | null",[1257,1469,1268],{},[1257,1471,1472],{},"Extra classes.",[279,1474,1475,1479,1480,1483,1484,1487,1488,1491,1492,1479,1495,1497,1498,1500],{},[1476,1477,1478],"strong",{},"Emits:"," ",[282,1481,1482],{},"onClick"," (the native ",[282,1485,1486],{},"@click"," also works via the underlying ",[282,1489,1490],{},"\u003Cbutton>",").\n",[1476,1493,1494],{},"Slots:",[282,1496,960],{},", plus ",[282,1499,521],{}," content.",[1502,1503,1504,1505,1508,1509,1512,1513,1516,1517,297],"tip",{},"Related: ",[282,1506,1507],{},"UiButtonMenu"," (dropdown), ",[282,1510,1511],{},"UiButtonToggleGroup"," (segmented toggles), ",[282,1514,1515],{},"UiButtonFabGroup"," (floating actions), and ",[282,1518,1519],{},"UiButtonTooltip",[1521,1522,1523],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":309,"searchDepth":330,"depth":330,"links":1525},[1526,1527,1528,1529,1530,1531,1532],{"id":301,"depth":330,"text":302},{"id":391,"depth":330,"text":392},{"id":589,"depth":330,"text":590},{"id":734,"depth":330,"text":735},{"id":953,"depth":330,"text":954},{"id":1095,"depth":330,"text":1096},{"id":1227,"depth":330,"text":1228},"Trigger actions with UiButton — variants, colors, sizes, and groups.","md",null,{},{"icon":164},{"title":161,"description":1533},"YKNT1TJ79R6Dh97tliKDsQK9jdfkTRBqU4hpAVHnVWA",[1541,1543],{"title":156,"path":157,"stem":158,"description":1542,"icon":159,"children":-1},"Show an SEO-friendly breadcrumb trail with JSON-LD structured data.",{"title":166,"path":167,"stem":168,"description":1544,"icon":169,"children":-1},"Connect, toggle, and float groups of buttons.",1782196219260]