\n```\n\nsame result is expected when using `active`, but `leadingIcon` is ignored\n```\n\u003CUButton\n label=\"Label\"\n active\n active-color=\"primary\"\n active-variant=\"soft\"\n icon=\"mdi-account\"\n @click.prevent=\"active = !active\"\n/>\n```\n\n### Additional context\n\n\u003Cimg width=\"202\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0756fb1c-772c-44ae-855d-90aba304bd9e\" />",[2867,2870,2873],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"v3","49DCB8",{"name":2874,"color":2875},"triage","ffffff",3972,"nuxt","ui","open","Different result than static for active-color & active-variant","2025-04-24T15:30:39Z","https://github.com/nuxt/ui/issues/3972",0.7536336,{"description":2885,"labels":2886,"number":2890,"owner":2877,"repository":2878,"state":2879,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/Cyanhall/nuxt-ui-v3-demo/tree/main/demo2\n\n### Description\n\nThe empty character in the column header will cause a console error: \"Hydration completed but contains mismatches.\" However, the functionality is normal.\n\n----\n\n### Workaround\nchange from:\n```js\n{\n accessorKey: 'action',\n header: '',\n}\n```\nto\n```js\n{\n accessorKey: 'action',\n header: ' ',\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nclient:742 [vite] connecting...\nclient:861 [vite] connected.\nruntime-core.esm-bundler.js:7013 \u003CSuspense> is an experimental feature and its API will likely change.\nruntime-core.esm-bundler.js:1638 Hydration completed but contains mismatches.\nlogMismatchError @ runtime-core.esm-bundler.js:1638\nhydrateFragment @ runtime-core.esm-bundler.js:2046\nhydrateNode @ runtime-core.esm-bundler.js:1766\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateFragment @ runtime-core.esm-bundler.js:2034\nhydrateNode @ runtime-core.esm-bundler.js:1766\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateFragment @ runtime-core.esm-bundler.js:2034\nhydrateNode @ runtime-core.esm-bundler.js:1766\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateChildren @ runtime-core.esm-bundler.js:1991\nhydrateElement @ runtime-core.esm-bundler.js:1880\nhydrateNode @ runtime-core.esm-bundler.js:1781\nhydrateSubTree @ runtime-core.esm-bundler.js:5292\ncomponentUpdateFn @ runtime-core.esm-bundler.js:5310\nrun @ reactivity.esm-bundler.js:225\nsetupRenderEffect @ runtime-core.esm-bundler.js:5454\nmountComponent @ runtime-core.esm-bundler.js:5229\nhydrateNode @ runtime-core.esm-bundler.js:1800\nhydrateSubTree @ runtime-core.esm-bundler.js:5292\ncomponentUpdateFn @ runtime-core.esm-bundler.js:5310\nrun @ reactivity.esm-bundler.js:225\nsetupRenderEffect @ runtime-core.esm-bundler.js:5454\nmountComponent @ runtime-core.esm-bundler.js:5229\nhydrateNode @ runtime-core.esm-bundler.js:1800\nhydrateSubTree @ runtime-core.esm-bundler.js:5292\ncomponentUpdateFn @ runtime-core.esm-bundler.js:5310\nrun @ reactivity.esm-bundler.js:225\nsetupRenderEffect @ runtime-core.esm-bundler.js:5454\nmountComponent @ runtime-core.esm-bundler.js:5229\nhydrateNode @ runtime-core.esm-bundler.js:1800\nhydrateSuspense @ runtime-core.esm-bundler.js:7264\nhydrateNode @ runtime-core.esm-bundler.js:1836\nhydrateSubTree @ runtime-core.esm-bundler.js:5292\ncomponentUpdateFn @ runtime-core.esm-bundler.js:5310\nrun @ reactivity.esm-bundler.js:225\nsetupRenderEffect @ runtime-core.esm-bundler.js:5454\nmountComponent @ runtime-core.esm-bundler.js:5229\nhydrateNode @ runtime-core.esm-bundler.js:1800\nhydrate @ runtime-core.esm-bundler.js:1674\nmount @ runtime-core.esm-bundler.js:3939\napp.mount @ runtime-dom.esm-bundler.js:1786\ninitApp @ entry.js:65\nawait in initApp\n(anonymous) @ entry.js:73\ndevtools.client.js:49 ✨ Nuxt DevTools Press Shift + Option + D to open DevTools\n```",[2887,2888,2889],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2874,"color":2875},2976,"Empty string in column header will cause Hydration console error","2024-12-25T14:59:02Z","https://github.com/nuxt/ui/issues/2976",0.7813351,{"description":2896,"labels":2897,"number":2900,"owner":2877,"repository":2878,"state":2901,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.11.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8, @nuxtjs/html-validator@1.8.2, @nuxt/image@1.8.1, @nuxt/eslint@0.6.1, @nuxtjs/seo@2.0.0-rc.23\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.8\",\n\n### Reproduction\n\n\u003C!-- layouts/default.vue -->\n\u003Ctemplate>\n \u003Cdiv class=\"container mx-auto\">\n \u003Cu-breadcrumb :items=\"items \" />\n \u003Cslot>\u003C/slot>\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript lang=\"ts\" setup>\nimport { useRoute } from 'vue-router';\n\nconst route = useRoute();\nconst items = useBreadcrumbItems({\n schemaOrg: true,\n});\n\u003C/script>\n\n\n### Description\n\nthis will render the breadcrumbs in a \u003Cdiv> with an aria-label, which is a violation of this rule: https://html-validate.org/rules/aria-label-misuse.html\n\n- Rule ID: aria-label-misuse\n- Category: Accessibility\n- Standards: WCAG 2.2 (A)WCAG 2.1 (A)WCAG 2.0 (A)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n ERROR HTML validation errors found for /song/justice-genesis-1\n\ninline\n 129:21990 error \"aria-label\" cannot be used on this element aria-label-misuse\n\n✖ 1 problem (1 error, 0 warnings)\n\nMore information:\n https://html-validate.org/rules/aria-label-misuse.html\n\n```",[2898,2899],{"name":2868,"color":2869},{"name":2871,"color":2872},2649,"closed","breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.6908091,{"description":2907,"labels":2908,"number":2911,"owner":2877,"repository":2878,"state":2901,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nRepo: https://github.com/Cyanhall/nuxt-ui-v3-demo/tree/main/demo3\n\nCode: https://github.com/Cyanhall/nuxt-ui-v3-demo/blob/main/demo3/app/components/SearchPalette.vue#L46\n\n### Description\n\nThe placeholder in UInput within UModal does not display.\n\n```vue\n\u003CUInput\n class=\"w-full mb-4\"\n size=\"sm\"\n icon=\"i-lucide-search\"\n placeholder=\"Search...\"\n>\n \u003Ctemplate #trailing>\n \u003CUKbd value=\"shift\" />\n \u003CUKbd value=\"G\" />\n \u003C/template>\n\u003C/UInput>\n```\n\u003Cimg width=\"496\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/be2e8457-b3ac-4b70-838b-2b2b7399c091\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2909,2910],{"name":2868,"color":2869},{"name":2871,"color":2872},2977,"The placeholder in UInput within UModal does not display","2025-03-03T09:06:21Z","https://github.com/nuxt/ui/issues/2977",0.71199024,{"description":2917,"labels":2918,"number":2922,"owner":2877,"repository":2923,"state":2901,"title":2924,"updated_at":2925,"url":2926,"score":2927},"- [x] `Nuxt`\n- [x] `Studio`\n- [x] logo only",[2919],{"name":2920,"color":2921},"design","00bd6f",780,"nuxt.com","Uniformize logos with same size","2023-09-05T08:18:35Z","https://github.com/nuxt/nuxt.com/issues/780",0.7148058,{"description":2929,"labels":2930,"number":2932,"owner":2877,"repository":2923,"state":2901,"title":2933,"updated_at":2934,"url":2935,"score":2936},"Example: https://www.raycast.com/nhojb/brew",[2931],{"name":2920,"color":2921},673,"[Modules] Details page","2023-09-05T08:18:34Z","https://github.com/nuxt/nuxt.com/issues/673",0.72044253,{"description":2938,"labels":2939,"number":2943,"owner":2877,"repository":2923,"state":2901,"title":2944,"updated_at":2945,"url":2946,"score":2947},"- [x] Move Revue contacts\n- [x] Subscribe form to contact Sendgrid API",[2940],{"name":2941,"color":2942},"enhancement","1ad6ff",1104,"Migrate newsletter to SendGrid","2023-01-10T15:04:54Z","https://github.com/nuxt/nuxt.com/issues/1104",0.7512746,{"description":2949,"labels":2950,"number":2954,"owner":2877,"repository":2877,"state":2901,"title":2955,"updated_at":2956,"url":2957,"score":2958},"\u003C!--\r\nIMPORTANT: Please use the following link to create a new issue:\r\n\r\nhttps://cmty.app/nuxt/issues/new\r\n\r\nIf your issue was not created using the app above, it will be closed immediately.\r\n-->\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7265\">#c7265\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2951],{"name":2952,"color":2953},"2.x","d4c5f9",3455,"The loss of data with alive-keep","2023-01-18T16:24:09Z","https://github.com/nuxt/nuxt/issues/3455",0.76438826,{"description":2960,"labels":2961,"number":2966,"owner":2877,"repository":2878,"state":2901,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Description\n\nI am new using Nuxt UI, and I am loving it.\nI personally believe buttons look better when they are wider than taller, therefore I like to add more padding in the x axis, but I don't want to do this for each button.\n\nI am currently doing it like this:\n\n```html\n\u003CUButton\n to=\"/login\"\n size=\"xl\"\n color=\"warning\"\n variant=\"solid\"\n class=\"font-semibold px-4\"\n >\n Iniciar sesión\n \u003C/UButton>\n```\n\nbut I don't know how to add the option for all buttons.\nI tried doing this in the app.config.ts:\n\n```js\nui: {\n button: {\n slots: {\n base: 'px-4 cursor-pointer'\n },\n}\n \n```\n\nand the cursor-pointer worked, but the px-4 didn't work. Any idea on how to make this work?",[2962,2965],{"name":2963,"color":2964},"question","d876e3",{"name":2871,"color":2872},3646,"How do I change the padding of all buttons globally?","2025-03-24T01:29:59Z","https://github.com/nuxt/ui/issues/3646",0.7667721,{"description":2972,"labels":2973,"number":2977,"owner":2877,"repository":2878,"state":2901,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@1.22.19\n- Builder: -\n- User Config: app, compatibilityDate, devtools, modules, css, runtimeConfig, vuefire\n- Runtime Modules: @nuxt/ui-pro@3.0.2, nuxt-vuefire@1.0.5, @pinia/nuxt@0.10.1\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/stupefied-lucy-jmlxr4\n\n### Description\n\nTable component is not reactive. Here's a simple example where items are added and removed. The 'num items' is updating in the view. However, the table does not remove nor add items.\n\n``` vue\n\u003Ctemplate>\n {{ data.length }} num items\n \u003CUTable :data=\"data\" />\n \u003CUButton label=\"Delete\" @click=\"deleteItem\" />\n \u003CUButton label=\"Add\" @click=\"addItem\" />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nfunction deleteItem() {\n const randomIndex = Math.floor(Math.random() * data.value.length);\n data.value.splice(randomIndex, 1);\n}\n\nfunction addItem() {\n data.value.push({\n id: Math.floor(Math.random() * 10000).toString(),\n });\n}\n\nconst data = ref([\n {\n id: \"4600\",\n },\n {\n id: \"4599\",\n },\n {\n id: \"4598\",\n },\n {\n id: \"4597\",\n },\n {\n id: \"4596\",\n },\n]);\n\u003C/script>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2974,2975,2976],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2874,"color":2875},3821,"Table is not reactive","2025-04-08T10:36:33Z","https://github.com/nuxt/ui/issues/3821",0.77341014,["Reactive",2983],{},["Set"],["ShallowReactive",2986],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fruS1kJsKma3Xk9SIxd7YKCjBRRcMSx-Ztua95Ah7Wuc":-1},"/nuxt/ui/2635"]