[{"data":1,"prerenderedAt":823},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/components/button":418,"surround-/docs/components/button":820},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Docs","/docs","docs",[9,90,353,360,366,379],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Get Started","group",[13,19,44,48,52,70,74,78,82,86],{"title":14,"path":15,"stem":16,"new":17,"type":18,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",false,"page",{"title":20,"path":21,"stem":22,"children":23,"new":17,"type":11},"Installation","/docs/installation","docs/02.installation",[24,28,32,36,40],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite",{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":45,"path":46,"stem":47,"new":17,"type":18,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":49,"path":50,"stem":51,"new":17,"type":18,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":53,"path":54,"stem":55,"children":56,"new":17,"type":11},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[57,60,63,67],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":71,"path":72,"stem":73,"new":17,"type":18,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":75,"path":76,"stem":77,"new":17,"type":18,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":79,"path":80,"stem":81,"new":17,"type":18,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":83,"path":84,"stem":85,"new":17,"type":18,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":87,"path":88,"stem":89,"new":17,"type":18,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":91,"path":92,"stem":93,"children":94,"new":17,"type":11},"Components","/docs/components","docs/02.components",[95,100,104,108,112,116,120,124,128,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349],{"title":96,"path":97,"stem":98,"new":17,"type":99,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion","component",{"title":101,"path":102,"stem":103,"new":17,"type":99,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":105,"path":106,"stem":107,"new":17,"type":99,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":109,"path":110,"stem":111,"new":17,"type":99,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":113,"path":114,"stem":115,"new":17,"type":99,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":117,"path":118,"stem":119,"new":17,"type":99,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":121,"path":122,"stem":123,"new":17,"type":99,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":125,"path":126,"stem":127,"new":17,"type":99,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":129,"path":130,"stem":131,"new":132,"type":99,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",true,{"title":134,"path":135,"stem":136,"new":17,"type":99,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":138,"path":139,"stem":140,"new":17,"type":99,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":142,"path":143,"stem":144,"new":17,"type":99,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":146,"path":147,"stem":148,"new":17,"type":99,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":150,"path":151,"stem":152,"new":17,"type":99,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":154,"path":155,"stem":156,"new":17,"type":99,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":158,"path":159,"stem":160,"new":17,"type":99,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":162,"path":163,"stem":164,"new":17,"type":99,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":166,"path":167,"stem":168,"new":17,"type":99,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":170,"path":171,"stem":172,"new":17,"type":99,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":174,"path":175,"stem":176,"new":17,"type":99,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":178,"path":179,"stem":180,"new":17,"type":99,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":182,"path":183,"stem":184,"new":17,"type":99,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":186,"path":187,"stem":188,"new":17,"type":99,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":190,"path":191,"stem":192,"new":132,"type":99,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":194,"path":195,"stem":196,"new":132,"type":99,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":198,"path":199,"stem":200,"new":17,"type":99,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":202,"path":203,"stem":204,"new":17,"type":99,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":206,"path":207,"stem":208,"new":17,"type":99,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":210,"path":211,"stem":212,"new":132,"type":99,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":214,"path":215,"stem":216,"new":17,"type":99,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":218,"path":219,"stem":220,"new":132,"type":99,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":222,"path":223,"stem":224,"new":132,"type":99,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":226,"path":227,"stem":228,"new":17,"type":99,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":230,"path":231,"stem":232,"new":17,"type":99,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":234,"path":235,"stem":236,"new":132,"type":99,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":238,"path":239,"stem":240,"new":17,"type":99,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":242,"path":243,"stem":244,"new":17,"type":99,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":246,"path":247,"stem":248,"new":17,"type":99,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":250,"path":251,"stem":252,"new":17,"type":99,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":254,"path":255,"stem":256,"new":17,"type":99,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":258,"path":259,"stem":260,"new":17,"type":99,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":262,"path":263,"stem":264,"new":17,"type":99,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":266,"path":267,"stem":268,"new":17,"type":99,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":270,"path":271,"stem":272,"new":17,"type":99,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":274,"path":275,"stem":276,"new":17,"type":99,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":278,"path":279,"stem":280,"new":17,"type":99,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":282,"path":283,"stem":284,"new":17,"type":99,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":286,"path":287,"stem":288,"new":17,"type":99,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":290,"path":291,"stem":292,"new":17,"type":99,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":294,"path":295,"stem":296,"new":17,"type":99,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":298,"path":299,"stem":300,"new":17,"type":99,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":302,"path":303,"stem":304,"new":17,"type":99,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":306,"path":307,"stem":308,"new":132,"type":99,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":310,"path":311,"stem":312,"new":17,"type":99,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":314,"path":315,"stem":316,"new":17,"type":99,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":318,"path":319,"stem":320,"new":17,"type":99,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":322,"path":323,"stem":324,"new":17,"type":99,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":326,"path":327,"stem":328,"new":17,"type":99,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":330,"path":331,"stem":332,"new":17,"type":99,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":334,"path":335,"stem":336,"new":17,"type":99,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":338,"path":339,"stem":340,"new":17,"type":99,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":342,"path":343,"stem":344,"new":17,"type":99,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":346,"path":347,"stem":348,"new":17,"type":99,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":350,"path":351,"stem":352,"new":17,"type":99,"children":-1},"Typography","/docs/components/typography","docs/components/typography",{"title":20,"path":21,"stem":22,"children":354,"new":17,"type":11},[355,356,357,358,359],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},{"title":53,"path":54,"stem":55,"children":361,"new":17,"type":11},[362,363,364,365],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},{"title":367,"path":368,"stem":369,"children":370,"new":17,"type":11},"Forms","/docs/forms","docs/forms",[371,375],{"title":372,"path":373,"stem":374,"new":17,"type":18,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":376,"path":377,"stem":378,"new":17,"type":18,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":380,"path":381,"stem":382,"children":383,"new":17,"type":11},"Registry","/docs/registry","docs/registry/index",[384,385,389,393,397,401],{"title":380,"path":381,"stem":382,"new":17,"type":18,"children":-1},{"title":386,"path":387,"stem":388,"new":17,"type":18,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":390,"path":391,"stem":392,"new":17,"type":18,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":394,"path":395,"stem":396,"new":17,"type":18,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":398,"path":399,"stem":400,"new":17,"type":18,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":402,"path":403,"stem":404,"new":17,"type":18,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"repo":406},{"id":407,"name":408,"repo":409,"description":410,"createdAt":411,"updatedAt":412,"pushedAt":413,"stars":414,"watchers":415,"forks":416,"defaultBranch":417},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-04-06T17:33:41Z","2026-04-06T17:33:39Z",9706,37,634,"dev",{"id":419,"title":125,"body":420,"description":813,"extension":814,"links":815,"meta":816,"navigation":132,"new":17,"path":126,"rawbody":817,"seo":818,"stem":127,"__hash__":819},"content/docs/components/button.md",{"type":421,"value":422,"toc":788},"minimark",[423,428,439,443,510,514,523,527,544,550,559,562,567,572,576,580,584,588,592,596,600,604,608,612,616,620,624,628,634,638,641,645,649,656,660,663,667,670,674,684,688,695,701,705,708,717],[424,425],"component-preview",{"name":426,"description":427},"ButtonDemo","A button",[429,430,435],"vue-school-link",{"className":431,"lesson":433,"placement":434},[432],"mt-6","buttons-variants-and-the-as-child-prop-with-shadcn-vue","top",[436,437,438],"p",{},"Watch a Vue School video about buttons, variants, and the as-child prop in shadcn-vue.",[440,441,20],"h2",{"id":442},"installation",[444,445,446,461,475],"code-tabs",{},[447,448,449,455],"tabs-list",{},[450,451,453],"tabs-trigger",{"value":452},"cli",[436,454,71],{},[450,456,458],{"value":457},"manual",[436,459,460],{},"Manual",[462,463,464],"tabs-content",{"value":452},[465,466,472],"pre",{"className":467,"code":469,"language":470,"meta":471},[468],"language-bash","npx shadcn-vue@latest add button\n","bash","",[473,474,469],"code",{"__ignoreMap":471},[462,476,477],{"value":457},[478,479,480,486,492,505],"steps",{},[481,482,483],"step",{},[436,484,485],{},"Install the following dependencies:",[465,487,490],{"className":488,"code":489,"language":470,"meta":471},[468],"npm install reka-ui\n",[473,491,489],{"__ignoreMap":471},[481,493,494],{},[436,495,496,497,504],{},"Copy and paste the ",[498,499,503],"a",{"href":500,"rel":501},"https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/button",[502],"nofollow","GitHub source code"," into your project.",[481,506,507],{},[436,508,509],{},"Update the import paths to match your project setup.",[440,511,513],{"id":512},"usage","Usage",[465,515,521],{"className":516,"code":518,"language":519,"meta":520},[517],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Button } from '@/components/ui/button'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CButton variant=\"outline\">\n    Button\n  \u003C/Button>\n\u003C/template>\n","vue","showLineNumbers",[473,522,518],{"__ignoreMap":471},[440,524,526],{"id":525},"cursor","Cursor",[436,528,529,530,535,536,539,540,543],{},"Tailwind v4 ",[498,531,534],{"href":532,"rel":533},"https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor",[502],"switched"," from ",[473,537,538],{},"cursor: pointer"," to ",[473,541,542],{},"cursor: default"," for the button component.",[436,545,546,547,549],{},"If you want to keep the ",[473,548,538],{}," behavior, add the following code to your CSS file:",[465,551,557],{"className":552,"code":554,"language":555,"meta":556},[553],"language-css","@layer base {\n  button:not(:disabled),\n  [role=\"button\"]:not(:disabled) {\n    cursor: pointer;\n  }\n}\n","css","showLineNumbers title=\"tailwind.css\"",[473,558,554],{"__ignoreMap":471},[440,560,386],{"id":561},"examples",[563,564,566],"h3",{"id":565},"size","Size",[424,568],{"name":569,"className":570},"ButtonSize",[571],"mb-4",[563,573,575],{"id":574},"default","Default",[424,577],{"name":578,"className":579},"ButtonDefault",[571],[563,581,583],{"id":582},"outline","Outline",[424,585],{"name":586,"className":587},"ButtonOutline",[571],[563,589,591],{"id":590},"secondary","Secondary",[424,593],{"name":594,"className":595},"ButtonSecondary",[571],[563,597,599],{"id":598},"ghost","Ghost",[424,601],{"name":602,"className":603},"ButtonGhost",[571],[563,605,607],{"id":606},"destructive","Destructive",[424,609],{"name":610,"className":611},"ButtonDestructive",[571],[563,613,615],{"id":614},"link","Link",[424,617],{"name":618,"className":619},"ButtonLink",[571],[563,621,623],{"id":622},"icon","Icon",[424,625],{"name":626,"className":627},"ButtonIcon",[571],[465,629,632],{"className":630,"code":631,"language":519,"meta":520},[517],"\u003Ctemplate>\n  \u003CButton variant=\"outline\" size=\"icon\" aria-label=\"Submit\">\n    \u003CCircleFadingArrowUpIcon />\n  \u003C/Button>\n\u003C/template>\n",[473,633,631],{"__ignoreMap":471},[563,635,637],{"id":636},"with-icon","With Icon",[436,639,640],{},"The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.",[424,642],{"name":643,"className":644},"ButtonWithIcon",[571],[563,646,648],{"id":647},"rounded","Rounded",[436,650,651,652,655],{},"Use the ",[473,653,654],{},"rounded-full"," class to make the button rounded.",[424,657],{"name":658,"className":659},"ButtonRounded",[571],[563,661,306],{"id":662},"spinner",[424,664],{"name":665,"className":666},"ButtonLoading",[571],[563,668,129],{"id":669},"button-group",[424,671],{"name":672,"className":673},"ButtonGroupDemo",[571],[436,675,676,677,680,681,683],{},"To create a button group, use the ",[473,678,679],{},"ButtonGroup"," component. See the ",[498,682,129],{"href":130}," documentation for more details.",[563,685,687],{"id":686},"link-aschild","Link (asChild)",[436,689,690,691,694],{},"You can use the ",[473,692,693],{},"as-child"," prop to make another component look like a button. Here's an example of a link that looks like a button.",[465,696,699],{"className":697,"code":698,"language":519,"meta":520},[517],"\u003Cscript setup lang=\"ts\">\nimport { Button } from '@/components/ui/button'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CButton as-child>\n    \u003Ca href=\"/login\">Login\u003C/a>\n  \u003C/Button>\n\u003C/template>\n",[473,700,698],{"__ignoreMap":471},[440,702,704],{"id":703},"api-reference","API Reference",[563,706,125],{"id":707},"button",[436,709,710,711,713,714,716],{},"The ",[473,712,125],{}," component is a wrapper around the ",[473,715,707],{}," element that adds a variety of styles and functionality.",[718,719,720,735],"table",{},[721,722,723],"thead",{},[724,725,726,730,733],"tr",{},[727,728,729],"th",{},"Prop",[727,731,732],{},"Type",[727,734,575],{},[736,737,738,756,771],"tbody",{},[724,739,740,746,751],{},[741,742,743],"td",{},[473,744,745],{},"variant",[741,747,748],{},[473,749,750],{},"\"default\" | \"outline\" | \"ghost\" | \"destructive\" | \"secondary\" | \"link\"",[741,752,753],{},[473,754,755],{},"\"default\"",[724,757,758,762,767],{},[741,759,760],{},[473,761,565],{},[741,763,764],{},[473,765,766],{},"\"default\" | \"sm\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"",[741,768,769],{},[473,770,755],{},[724,772,773,778,783],{},[741,774,775],{},[473,776,777],{},"asChild",[741,779,780],{},[473,781,782],{},"boolean",[741,784,785],{},[473,786,787],{},"false",{"title":471,"searchDepth":789,"depth":789,"links":790},2,[791,792,793,794,810],{"id":442,"depth":789,"text":20},{"id":512,"depth":789,"text":513},{"id":525,"depth":789,"text":526},{"id":561,"depth":789,"text":386,"children":795},[796,798,799,800,801,802,803,804,805,806,807,808,809],{"id":565,"depth":797,"text":566},3,{"id":574,"depth":797,"text":575},{"id":582,"depth":797,"text":583},{"id":590,"depth":797,"text":591},{"id":598,"depth":797,"text":599},{"id":606,"depth":797,"text":607},{"id":614,"depth":797,"text":615},{"id":622,"depth":797,"text":623},{"id":636,"depth":797,"text":637},{"id":647,"depth":797,"text":648},{"id":662,"depth":797,"text":306},{"id":669,"depth":797,"text":129},{"id":686,"depth":797,"text":687},{"id":703,"depth":789,"text":704,"children":811},[812],{"id":707,"depth":797,"text":125},"Displays a button or a component that looks like a button.","md",null,{"featured":132,"component":132},"---\ntitle: Button\ndescription: Displays a button or a component that looks like a button.\nfeatured: true\ncomponent: true\n---\n\n::component-preview\n---\nname: ButtonDemo\ndescription: A button\n---\n::\n\n::vue-school-link{class=\"mt-6\" lesson=\"buttons-variants-and-the-as-child-prop-with-shadcn-vue\" placement=\"top\"}\nWatch a Vue School video about buttons, variants, and the as-child prop in shadcn-vue.\n::\n\n## Installation\n\n::code-tabs\n\n::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add button\n```\n\n::\n\n::tabs-content{value=\"manual\"}\n  ::steps\n    ::step\n    Install the following dependencies:\n    ::\n\n    ```bash\n    npm install reka-ui\n    ```\n\n    ::step\n    Copy and paste the [GitHub source code](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/button) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  ::\n::\n\n::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Button } from '@/components/ui/button'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CButton variant=\"outline\">\n    Button\n  \u003C/Button>\n\u003C/template>\n```\n\n## Cursor\n\nTailwind v4 [switched](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor) from `cursor: pointer` to `cursor: default` for the button component.\n\nIf you want to keep the `cursor: pointer` behavior, add the following code to your CSS file:\n\n```css showLineNumbers title=\"tailwind.css\"\n@layer base {\n  button:not(:disabled),\n  [role=\"button\"]:not(:disabled) {\n    cursor: pointer;\n  }\n}\n```\n\n## Examples\n\n### Size\n\n::component-preview\n---\nname: ButtonSize\nclass: mb-4\n---\n::\n\n### Default\n\n::component-preview\n---\nname: ButtonDefault\nclass: mb-4\n---\n::\n\n### Outline\n\n::component-preview\n---\nname: ButtonOutline\nclass: mb-4\n---\n::\n\n### Secondary\n\n::component-preview\n---\nname: ButtonSecondary\nclass: mb-4\n---\n::\n\n### Ghost\n\n::component-preview\n---\nname: ButtonGhost\nclass: mb-4\n---\n::\n\n### Destructive\n\n::component-preview\n---\nname: ButtonDestructive\nclass: mb-4\n---\n::\n\n### Link\n\n::component-preview\n---\nname: ButtonLink\nclass: mb-4\n---\n::\n\n### Icon\n\n::component-preview\n---\nname: ButtonIcon\nclass: mb-4\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CButton variant=\"outline\" size=\"icon\" aria-label=\"Submit\">\n    \u003CCircleFadingArrowUpIcon />\n  \u003C/Button>\n\u003C/template>\n```\n\n### With Icon\n\nThe spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.\n\n::component-preview\n---\nname: ButtonWithIcon\nclass: mb-4\n---\n::\n\n### Rounded\n\nUse the `rounded-full` class to make the button rounded.\n\n::component-preview\n---\nname: ButtonRounded\nclass: mb-4\n---\n::\n\n### Spinner\n\n::component-preview\n---\nname: ButtonLoading\nclass: mb-4\n---\n::\n\n### Button Group\n\n::component-preview\n---\nname: ButtonGroupDemo\nclass: mb-4\n---\n::\n\nTo create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) documentation for more details.\n\n### Link (asChild)\n\nYou can use the `as-child` prop to make another component look like a button. Here's an example of a link that looks like a button.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Button } from '@/components/ui/button'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CButton as-child>\n    \u003Ca href=\"/login\">Login\u003C/a>\n  \u003C/Button>\n\u003C/template>\n```\n\n## API Reference\n\n### Button\n\nThe `Button` component is a wrapper around the `button` element that adds a variety of styles and functionality.\n\n| Prop      | Type                                                                          | Default     |\n| --------- | ----------------------------------------------------------------------------- | ----------- |\n| `variant` | `\"default\" \\| \"outline\" \\| \"ghost\" \\| \"destructive\" \\| \"secondary\" \\| \"link\"` | `\"default\"` |\n| `size`    | `\"default\" \\| \"sm\" \\| \"lg\" \\| \"icon\" \\| \"icon-sm\" \\| \"icon-lg\"`               | `\"default\"` |\n| `asChild` | `boolean`                                                                     | `false`     |\n",{"title":125,"description":813},"LVIMwBYpIQ8HEmBakECNCdPWAZV3cTJLmw2T9PD9TrA",[821,822],{"title":121,"path":122,"stem":123,"children":-1},{"title":129,"path":130,"stem":131,"children":-1},1775649981493]