[{"data":1,"prerenderedAt":752},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Felements\u002Fbutton":10,"docs-sidebar":683,"i-lucide:file-text":744,"i-lucide:arrow-left":746,"i-lucide:mouse-pointer-click":748,"i-lucide:arrow-up-right":750},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"id":11,"title":12,"body":13,"description":674,"extension":189,"group":675,"groupOrder":442,"meta":676,"navTitle":677,"navigation":678,"order":54,"path":679,"seo":680,"stem":681,"__hash__":682},"docs\u002Fdocs\u002Felements\u002Fbutton.md","\u003Cwmcp-button>",{"type":14,"value":15,"toc":668},"minimark",[16,23,41,89,92,107,112,346,349,378,382,392,506,510,521,562,568,572,580,664],[17,18,20],"h1",{"id":19},"wmcp-button",[21,22,12],"code",{},[24,25,26,27,31,32,36,37,40],"p",{},"The first ",[28,29,30],"strong",{},"interaction primitive",". Where the form controls expose a ",[33,34,35],"em",{},"value"," an agent can set, a button exposes an ",[33,38,39],{},"action"," an agent can trigger. With no agent present (the common case today) it is simply a good, accessible button.",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-html shiki shiki-themes github-light-default ayu-dark","\u003Cwmcp-button variant=\"primary\">Save\u003C\u002Fwmcp-button>\n","html","",[21,49,50],{"__ignoreMap":47},[51,52,55,59,62,66,70,74,77,81,84,86],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sqV5G","\u003C",[51,60,19],{"class":61},"sfBZl",[51,63,65],{"class":64},"sI192"," variant",[51,67,69],{"class":68},"siQKT","=",[51,71,73],{"class":72},"sxLuP","\"primary\"",[51,75,76],{"class":57},">",[51,78,80],{"class":79},"sBz_o","Save",[51,82,83],{"class":57},"\u003C\u002F",[51,85,19],{"class":61},[51,87,88],{"class":57},">\n",[90,91],"button-demo",{},[24,93,94,95,98,99,102,103,106],{},"Both a real click and an agent's tool call route through the same inner button, so the click handlers you already wrote run either way — and ",[21,96,97],{},"type=\"submit\""," \u002F ",[21,100,101],{},"type=\"reset\""," drive the surrounding form. A ",[21,104,105],{},"disabled"," button can be activated by neither.",[108,109,111],"h2",{"id":110},"element-attributes","Element attributes",[113,114,115,134],"table",{},[116,117,118],"thead",{},[119,120,121,125,128,131],"tr",{},[122,123,124],"th",{},"Attribute",[122,126,127],{},"Type",[122,129,130],{},"Default",[122,132,133],{},"Description",[135,136,137,174,201,234,253,270,290,314,330],"tbody",{},[119,138,139,145,150,155],{},[140,141,142],"td",{},[21,143,144],{},"variant",[140,146,147],{},[21,148,149],{},"string",[140,151,152],{},[21,153,154],{},"primary",[140,156,157,158,160,161,160,164,160,167,160,170,173],{},"Visual style: ",[21,159,154],{},", ",[21,162,163],{},"secondary",[21,165,166],{},"destructive",[21,168,169],{},"outline",[21,171,172],{},"ghost"," (reflected).",[119,175,176,181,185,190],{},[140,177,178],{},[21,179,180],{},"size",[140,182,183],{},[21,184,149],{},[140,186,187],{},[21,188,189],{},"md",[140,191,192,160,195,197,198,173],{},[21,193,194],{},"sm",[21,196,189],{},", or ",[21,199,200],{},"lg",[119,202,203,208,212,217],{},[140,204,205],{},[21,206,207],{},"type",[140,209,210],{},[21,211,149],{},[140,213,214],{},[21,215,216],{},"button",[140,218,219,160,221,197,224,227,228,230,231,233],{},[21,220,216],{},[21,222,223],{},"submit",[21,225,226],{},"reset",". ",[21,229,223],{},"\u002F",[21,232,226],{}," act on the containing form.",[119,235,236,240,245,250],{},[140,237,238],{},[21,239,105],{},[140,241,242],{},[21,243,244],{},"boolean",[140,246,247],{},[21,248,249],{},"false",[140,251,252],{},"Disables the button for humans and agents alike (reflected).",[119,254,255,260,264,267],{},[140,256,257],{},[21,258,259],{},"label",[140,261,262],{},[21,263,149],{},[140,265,266],{},"—",[140,268,269],{},"Accessible name. Falls back to the slotted text; set it for icon-only buttons.",[119,271,272,277,281,283],{},[140,273,274],{},[21,275,276],{},"name",[140,278,279],{},[21,280,149],{},[140,282,266],{},[140,284,285,286,289],{},"Identifier used for the default tool name (",[21,287,288],{},"click_\u003Cname>",").",[119,291,292,297,301,305],{},[140,293,294],{},[21,295,296],{},"expose",[140,298,299],{},[21,300,244],{},[140,302,303],{},[21,304,249],{},[140,306,307,308,313],{},"Register a ",[309,310,312],"a",{"href":311},"\u002Fdocs\u002Fwebmcp","WebMCP tool"," that activates this button.",[119,315,316,321,325,327],{},[140,317,318],{},[21,319,320],{},"tool-name",[140,322,323],{},[21,324,149],{},[140,326,266],{},[140,328,329],{},"Override the generated tool name.",[119,331,332,337,341,343],{},[140,333,334],{},[21,335,336],{},"tool-description",[140,338,339],{},[21,340,149],{},[140,342,266],{},[140,344,345],{},"Override the generated tool description.",[24,347,348],{},"The visible label is provided as the element's content (slotted), not via an attribute:",[42,350,352],{"className":44,"code":351,"language":46,"meta":47,"style":47},"\u003Cwmcp-button variant=\"destructive\">Delete account\u003C\u002Fwmcp-button>\n",[21,353,354],{"__ignoreMap":47},[51,355,356,358,360,362,364,367,369,372,374,376],{"class":53,"line":54},[51,357,58],{"class":57},[51,359,19],{"class":61},[51,361,65],{"class":64},[51,363,69],{"class":68},[51,365,366],{"class":72},"\"destructive\"",[51,368,76],{"class":57},[51,370,371],{"class":79},"Delete account",[51,373,83],{"class":57},[51,375,19],{"class":61},[51,377,88],{"class":57},[108,379,381],{"id":380},"form-participation","Form participation",[24,383,384,385,388,389,391],{},"A native ",[21,386,387],{},"\u003Cbutton type=\"submit\">"," inside a shadow root can't reach the page's form. ",[21,390,12],{}," is form-associated, so it does — submitting and resetting work as you'd expect:",[42,393,395],{"className":44,"code":394,"language":46,"meta":47,"style":47},"\u003Cform>\n  \u003Cwmcp-input name=\"email\" type=\"email\" required>\u003C\u002Fwmcp-input>\n  \u003Cwmcp-button type=\"submit\">Sign up\u003C\u002Fwmcp-button>\n  \u003Cwmcp-button type=\"reset\" variant=\"ghost\">Clear\u003C\u002Fwmcp-button>\n\u003C\u002Fform>\n",[21,396,397,406,440,465,497],{"__ignoreMap":47},[51,398,399,401,404],{"class":53,"line":54},[51,400,58],{"class":57},[51,402,403],{"class":61},"form",[51,405,88],{"class":57},[51,407,409,412,415,418,420,423,426,428,430,433,436,438],{"class":53,"line":408},2,[51,410,411],{"class":57},"  \u003C",[51,413,414],{"class":61},"wmcp-input",[51,416,417],{"class":64}," name",[51,419,69],{"class":68},[51,421,422],{"class":72},"\"email\"",[51,424,425],{"class":64}," type",[51,427,69],{"class":68},[51,429,422],{"class":72},[51,431,432],{"class":64}," required",[51,434,435],{"class":57},">\u003C\u002F",[51,437,414],{"class":61},[51,439,88],{"class":57},[51,441,443,445,447,449,451,454,456,459,461,463],{"class":53,"line":442},3,[51,444,411],{"class":57},[51,446,19],{"class":61},[51,448,425],{"class":64},[51,450,69],{"class":68},[51,452,453],{"class":72},"\"submit\"",[51,455,76],{"class":57},[51,457,458],{"class":79},"Sign up",[51,460,83],{"class":57},[51,462,19],{"class":61},[51,464,88],{"class":57},[51,466,468,470,472,474,476,479,481,483,486,488,491,493,495],{"class":53,"line":467},4,[51,469,411],{"class":57},[51,471,19],{"class":61},[51,473,425],{"class":64},[51,475,69],{"class":68},[51,477,478],{"class":72},"\"reset\"",[51,480,65],{"class":64},[51,482,69],{"class":68},[51,484,485],{"class":72},"\"ghost\"",[51,487,76],{"class":57},[51,489,490],{"class":79},"Clear",[51,492,83],{"class":57},[51,494,19],{"class":61},[51,496,88],{"class":57},[51,498,500,502,504],{"class":53,"line":499},5,[51,501,83],{"class":57},[51,503,403],{"class":61},[51,505,88],{"class":57},[108,507,509],{"id":508},"tool-shape","Tool shape",[24,511,512,513,516,517,520],{},"The exposed tool takes ",[28,514,515],{},"no arguments"," — calling it ",[33,518,519],{},"is"," the action:",[42,522,526],{"className":523,"code":524,"language":525,"meta":47,"style":47},"language-json shiki shiki-themes github-light-default ayu-dark","{\n  \"type\": \"object\",\n  \"properties\": {}\n}\n","json",[21,527,528,533,547,557],{"__ignoreMap":47},[51,529,530],{"class":53,"line":54},[51,531,532],{"class":79},"{\n",[51,534,535,538,541,544],{"class":53,"line":408},[51,536,537],{"class":61},"  \"type\"",[51,539,540],{"class":68},":",[51,542,543],{"class":72}," \"object\"",[51,545,546],{"class":68},",\n",[51,548,549,552,554],{"class":53,"line":442},[51,550,551],{"class":61},"  \"properties\"",[51,553,540],{"class":68},[51,555,556],{"class":79}," {}\n",[51,558,559],{"class":53,"line":467},[51,560,561],{"class":79},"}\n",[24,563,564,565,567],{},"When the agent calls it, the button activates exactly as a click would; the tool result reports what happened (and whether a form was submitted or reset). Activating a ",[21,566,105],{}," button returns an error result instead.",[108,569,571],{"id":570},"theming","Theming",[24,573,574,575,579],{},"Every visual is a CSS custom property, defaulting through the ",[309,576,578],{"href":577},"\u002Fdocs\u002Finstallation","design tokens"," to the shadcn base palette. Override per variant:",[42,581,585],{"className":582,"code":583,"language":584,"meta":47,"style":47},"language-css shiki shiki-themes github-light-default ayu-dark",":root {\n  --button-primary-bg: var(--brand);\n  --button-primary-text: var(--brand-foreground);\n  --button-radius: 9999px; \u002F* pill buttons *\u002F\n}\n","css",[21,586,587,596,620,638,660],{"__ignoreMap":47},[51,588,589,593],{"class":53,"line":54},[51,590,592],{"class":591},"sybcr",":root",[51,594,595],{"class":79}," {\n",[51,597,598,602,604,608,611,614,617],{"class":53,"line":408},[51,599,601],{"class":600},"sCHdd","  --button-primary-bg",[51,603,540],{"class":68},[51,605,607],{"class":606},"sAJRi"," var",[51,609,610],{"class":79},"(",[51,612,613],{"class":600},"--brand",[51,615,616],{"class":79},")",[51,618,619],{"class":68},";\n",[51,621,622,625,627,629,631,634,636],{"class":53,"line":442},[51,623,624],{"class":600},"  --button-primary-text",[51,626,540],{"class":68},[51,628,607],{"class":606},[51,630,610],{"class":79},[51,632,633],{"class":600},"--brand-foreground",[51,635,616],{"class":79},[51,637,619],{"class":68},[51,639,640,643,645,649,653,656],{"class":53,"line":467},[51,641,642],{"class":600},"  --button-radius",[51,644,540],{"class":68},[51,646,648],{"class":647},"sQY3k"," 9999",[51,650,652],{"class":651},"s7jPt","px",[51,654,655],{"class":68},";",[51,657,659],{"class":658},"s5O_a"," \u002F* pill buttons *\u002F\n",[51,661,662],{"class":53,"line":499},[51,663,561],{"class":79},[665,666,667],"style",{},"html pre.shiki code .sqV5G, html code.shiki .sqV5G{--shiki-default:#1F2328;--shiki-dark:#39BAE680}html pre.shiki code .sfBZl, html code.shiki .sfBZl{--shiki-default:#116329;--shiki-dark:#39BAE6}html pre.shiki code .sI192, html code.shiki .sI192{--shiki-default:#0550AE;--shiki-dark:#FFB454}html pre.shiki code .siQKT, html code.shiki .siQKT{--shiki-default:#1F2328;--shiki-dark:#BFBDB6B3}html pre.shiki code .sxLuP, html code.shiki .sxLuP{--shiki-default:#0A3069;--shiki-dark:#AAD94C}html pre.shiki code .sBz_o, html code.shiki .sBz_o{--shiki-default:#1F2328;--shiki-dark:#BFBDB6}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 .sybcr, html code.shiki .sybcr{--shiki-default:#0550AE;--shiki-dark:#95E6CB}html pre.shiki code .sCHdd, html code.shiki .sCHdd{--shiki-default:#953800;--shiki-dark:#BFBDB6}html pre.shiki code .sAJRi, html code.shiki .sAJRi{--shiki-default:#0550AE;--shiki-dark:#F07178}html pre.shiki code .sQY3k, html code.shiki .sQY3k{--shiki-default:#0550AE;--shiki-dark:#D2A6FF}html pre.shiki code .s7jPt, html code.shiki .s7jPt{--shiki-default:#CF222E;--shiki-dark:#FF8F40}html pre.shiki code .s5O_a, html code.shiki .s5O_a{--shiki-default:#6E7781;--shiki-default-font-style:inherit;--shiki-dark:#5A6673;--shiki-dark-font-style:italic}",{"title":47,"searchDepth":408,"depth":408,"links":669},[670,671,672,673],{"id":110,"depth":408,"text":111},{"id":380,"depth":408,"text":381},{"id":508,"depth":408,"text":509},{"id":570,"depth":408,"text":571},"A themeable button that exposes an action — not a value — for an agent to trigger.","Interaction",{},"Button",true,"\u002Fdocs\u002Felements\u002Fbutton",{"title":12,"description":674},"docs\u002Felements\u002Fbutton","A1Pq-iRCVlZ1KuzzZft8jx0p0hR1tGMHE-CvBdFiWlY",[684,685,690,694,698,702,706,710,714,718,722,727,731,734,736,739,742],{"path":679,"title":12,"navTitle":677,"group":675,"order":54,"groupOrder":442},{"path":686,"title":687,"navTitle":688,"group":689,"order":467,"groupOrder":408},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":691,"title":692,"navTitle":693,"group":675,"order":408,"groupOrder":442},"\u002Fdocs\u002Felements\u002Fdialog","\u003Cwmcp-dialog>","Dialog",{"path":695,"title":696,"navTitle":697,"group":689,"order":54,"groupOrder":408},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":699,"title":700,"navTitle":701,"group":675,"order":442,"groupOrder":442},"\u002Fdocs\u002Felements\u002Fmenu","\u003Cwmcp-menu>","Menu",{"path":703,"title":704,"navTitle":705,"group":675,"order":499,"groupOrder":442},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",{"path":707,"title":708,"navTitle":709,"group":689,"order":499,"groupOrder":408},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":711,"title":712,"navTitle":713,"group":689,"order":442,"groupOrder":408},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":715,"title":716,"navTitle":717,"group":675,"order":467,"groupOrder":442},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>","Tabs",{"path":719,"title":720,"navTitle":721,"group":689,"order":408,"groupOrder":408},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":723,"title":724,"navTitle":725,"group":675,"order":726,"groupOrder":442},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",6,{"path":728,"title":729,"navTitle":729,"group":730,"order":726,"groupOrder":54},"\u002Fdocs\u002Fframeworks","React & Vue","Getting started",{"path":732,"title":733,"navTitle":733,"group":730,"order":54,"groupOrder":54},"\u002Fdocs","Introduction",{"path":577,"title":735,"navTitle":735,"group":730,"order":408,"groupOrder":54},"Installation",{"path":737,"title":738,"navTitle":738,"group":730,"order":499,"groupOrder":54},"\u002Fdocs\u002Ftesting","Testing",{"path":740,"title":741,"navTitle":741,"group":730,"order":442,"groupOrder":54},"\u002Fdocs\u002Fvalidation","Validation",{"path":311,"title":743,"navTitle":743,"group":730,"order":467,"groupOrder":54},"WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":745},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":747},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":749},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 4.1L12 6M5.1 8l-2.9-.8M6 12l-1.9 2M7.2 2.2L8 5.1m1.037 4.59a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":751},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",1782971919411]