\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[3139,3142],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"v3","49DCB8",3307,"nuxt","ui","open","Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-08-25T13:20:01Z","https://github.com/nuxt/ui/issues/3307",0.7217077,{"description":3154,"labels":3155,"number":3159,"owner":3146,"repository":3147,"state":3148,"title":3160,"updated_at":3161,"url":3162,"score":3163},"### Description\n\nHey everyone, I was trying to add a `UTooltip` to a `UColorModeButton`.\n\n```vue\n\u003CUTooltip :delay-duration=\"0\" text=\"Toggle mode\">\n \u003CUColorModeButton :ui=\"{ base: 'text-dimmed hover:text-highlighted' }\" />\n\u003C/UTooltip>\n```\n\nUnfortunately, the tooltip gets pushed to the top-left corner of the viewport. Am I missing something or doing anything incorrectly here?",[3156],{"name":3157,"color":3158},"question","d876e3",4286,"Can UColorModeButton be wrapped in a UTooltip?","2025-06-04T11:52:41Z","https://github.com/nuxt/ui/issues/4286",0.7738356,{"description":3165,"labels":3166,"number":3178,"owner":3146,"repository":3147,"state":3179,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3167,3170,3173,3176],{"name":3168,"color":3169},"bug","d73a4a",{"name":3171,"color":3172},"triage","ffffff",{"name":3174,"color":3175},"closed-by-bot","ededed",{"name":3177,"color":3175},"stale",2860,"closed","[UButton] Using a custom color on the link variant causes an error","2025-06-18T09:05:19Z","https://github.com/nuxt/ui/issues/2860",0.7507375,{"description":3185,"labels":3186,"number":3191,"owner":3146,"repository":3147,"state":3179,"title":3192,"updated_at":3193,"url":3194,"score":3195},"### Description\n\n``` vue.js\n\n\u003Ctemplate>\n \u003Cdiv class=\"mt-4 w-full\">\n \u003CUTable :data=\"combinationRows\" :columns=\"columns\" ref=\"table\">\n \u003Ctemplate #price-cell=\"{ row }\">\n \u003Cp>{{ row.original.price }}\u003C/p>\n \u003CUInput v-model=\"row.original.price\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #promotional-price-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.promotionalPrice\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #inventory-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.inventory\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #warning-inventory-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.warningInventory\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #sku-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.sku\" />\n \u003C/template>\n \u003C/UTable>\n \u003C/div>\n\n \u003Cp>{{ combinationRows }}\u003C/p>\n\u003C/template>\n\n\n\u003Cscript lang=ts setup>\n\nconst columns: TableColumn\u003CCombinationRow>[] = [\n {\n accessorKey: 'color',\n header: 'color'\n },\n {\n accessorKey: 'size',\n header: 'size'\n },\n {\n id: 'price',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Price'), // Header Text\n h(UButton, {\n size: 'xs', \n color: 'neutral',\n variant: 'ghost', \n icon: 'i-hugeicons:copy-01', \n 'aria-label': 'Price information', \n class: 'cursor-pointer', \n \n onclick: () => {\n console.log('Price button clicked');\n\n if (combinationRows.value.length > 0) {\n const firstRowPrice = combinationRows?.value?.[0]?.price ?? '0';\n combinationRows.value.forEach(row => {\n row.price = firstRowPrice;\n });\n triggerRef(combinationRows); // Force table update - important for reactivity\n \n } else {\n console.warn('No rows available to copy price from.');\n }\n }\n },\n )\n ])\n },\n {\n id: 'promotional-price',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'promotional price'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'inventory',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Inventory'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'warning-inventory',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Warning Inventory value'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'sku',\n header: 'SKU number'\n }\n];\n\n\u003C/script>\n```\n\nwhen updating price to all rows in onClick (see onClick for price above) it does not update UInput in all rows\nalthough i can see \u003Cp>{{ combinationRows }}\u003C/p> getting updated. The question is how can i update price to all rows. using v3.0.0-alpha.13",[3187,3188,3189,3190],{"name":3157,"color":3158},{"name":3143,"color":3144},{"name":3174,"color":3175},{"name":3177,"color":3175},3381,"Uinput not updating inside UTable rows","2025-06-18T09:01:59Z","https://github.com/nuxt/ui/issues/3381",0.7606131,{"description":3197,"labels":3198,"number":3203,"owner":3146,"repository":3147,"state":3179,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Description\n\nHi! How can I set up a variant, for example switch component?\n\n`app.config`:\n```js\nswitch: {\n defaultVariants: {\n color: 'neutral',\n },\n variants: {\n button: {\n true: {\n root: 'flex-row-reverse hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] transition-colors',\n container: 'my-2 mx-2',\n wrapper: 'size-full relative',\n label: 'py-2',\n },\n }\n }\n}\n```\nUsing this has no effect...\n```html\n\u003CUSwitch v-model=\"value\" label=\"test\" button />\n```\n\n---\nbut if i set defaultVariants in `app.config` its works:\n```\ndefaultVariants: {\n color: 'neutral',\n button: true\n},\n```\n\n---\nso how do you make it work?",[3199,3200,3201,3202],{"name":3157,"color":3158},{"name":3143,"color":3144},{"name":3174,"color":3175},{"name":3177,"color":3175},3179,"Understanding how variants work (custom variants)","2025-06-18T09:02:25Z","https://github.com/nuxt/ui/issues/3179",0.7609374,{"description":3209,"labels":3210,"number":3213,"owner":3146,"repository":3214,"state":3179,"title":3215,"updated_at":3216,"url":3217,"score":3218},"- [ ] Delay when hovering\n- [ ] Button shouldn't be clickable\n- [ ] When moving the mouse between the trigger and the popover, it disappears\n\n> I assume this would also be applicable to `Dropdown` component",[3211],{"name":3168,"color":3212},"ff281a",315,"nuxt.com","Navbar popover issues with hover mode","2023-02-15T12:32:07Z","https://github.com/nuxt/nuxt.com/issues/315",0.76962775,{"description":3220,"labels":3221,"number":3213,"owner":3146,"repository":3225,"state":3179,"title":3226,"updated_at":3227,"url":3228,"score":3218},"Hi all,\r\n\r\nI am trying to test my nuxt app with @nuxt/test-utils, but I am stuck with this error (all components and layouts are listed as errors).\r\n\r\n```\r\nFAIL tests/start.test.js (51.639 s)\r\n browser\r\n ✕ setup nuxt (49957 ms)\r\n ✕ renders the index page (794 ms)\r\n\r\n ● browser › setup nuxt\r\n\r\n\r\n ERROR in ./layouts/error.vue\r\n Module build failed (from ./node_modules/vuetify-loader/lib/loader.js):\r\n NonErrorEmittedError: (Emitted value instead of an instance of Error) SyntaxError: Invalid or unexpected token\r\n\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:313:13\r\n at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11\r\n at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:172:11\r\n at loadLoader (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/loadLoader.js:32:11)\r\n at iteratePitchingLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)\r\n at runLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:2)\r\n at NormalModule.doBuild (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:295:3)\r\n at NormalModule.build (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:446:15)\r\n at Compilation.buildModule (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:739:10)\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:981:14\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:409:6\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:155:13\r\n at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), \u003Canonymous>:6:1)\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:138:29\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:346:9\r\n @ ./.nuxt/t12hfdrq/index.js 27:0-48 550:0-32\r\n @ ./.nuxt/t12hfdrq/client.js\r\n @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/t12hfdrq/client.js\r\n ERROR in ./layouts/default.vue\r\n Module build failed (from ./node_modules/vuetify-loader/lib/loader.js):\r\n NonErrorEmittedError: (Emitted value instead of an instance of Error) SyntaxError: Invalid or unexpected token\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:313:13\r\n at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11\r\n at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:172:11\r\n at loadLoader (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/loadLoader.js:32:11)\r\n at iteratePitchingLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)\r\n at runLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:2)\r\n at NormalModule.doBuild (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:295:3)\r\n at NormalModule.build (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:446:15)\r\n at Compilation.buildModule (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:739:10)\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:981:14\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:409:6\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:155:13\r\n at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), \u003Canonymous>:6:1)\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:138:29\r\n at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:346:9\r\n @ ./.nuxt/t12hfdrq/App.js 28:0-50 30:32-41\r\n @ ./.nuxt/t12hfdrq/index.js\r\n @ ./.nuxt/t12hfdrq/client.js\r\n @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/t12hfdrq/client.js\r\n```\r\nMy `jest.config.js`:\r\n\r\n```js\r\n/*\r\n * For a detailed explanation regarding each configuration property, visit:\r\n * https://jestjs.io/docs/configuration\r\n */\r\n\r\nmodule.exports = {\r\n clearMocks: true,\r\n collectCoverage: true,\r\n coverageDirectory: 'coverage',\r\n coverageProvider: 'v8',\r\n preset: '@nuxt/test-utils',\r\n transformIgnorePatterns: [\r\n 'node_modules/(?!(nuxt-i18n|@nuxtjs/vuetify|@nuxtjs/i18n|nuxt-highcharts)/)',\r\n ],\r\n setupFilesAfterEnv: ['./tests/setup.js'],\r\n moduleNameMapper: {\r\n '^@/(.)$': '\u003CrootDir>/$1',\r\n '^~/(.)$': '\u003CrootDir>/$1',\r\n '^./(.)$': '\u003CrootDir>/$1',\r\n '^vue$': 'vue/dist/vue.common.js',\r\n },\r\n}\r\n```\r\n\r\nMy `setup.js`:\r\n\r\n```js\r\nimport path from 'path'\r\nimport glob from 'glob'\r\nimport Vue from 'vue'\r\n\r\nglob.sync(path.join(__dirname, './components/**/*.vue')).forEach((file) => {\r\n const name = file.match(/(\\w*)\\.vue$/)[1]\r\n Vue.component(name, require(file).default)\r\n})\r\n\r\nglobal.Vue = Vue\r\n```\r\n\r\nI am using nuxt components with `components: true` in my `nuxt.config.js`.\r\n\r\nHere my `package.json`:\r\n\r\n```json\r\n{\r\n \"name\": \"ui\",\r\n \"version\": \"1.0.0\",\r\n \"private\": true,\r\n \"scripts\": {\r\n \"dev\": \"nuxt\",\r\n \"build\": \"nuxt build\",\r\n \"start\": \"nuxt start\",\r\n \"generate\": \"nuxt generate\",\r\n \"lint:js\": \"eslint --ext \\\".js,.vue\\\" --ignore-path .gitignore .\",\r\n \"lint:prettier\": \"prettier --check .\",\r\n \"lint\": \"yarn lint:js && yarn lint:prettier\",\r\n \"lintfix\": \"prettier --write --list-different . && yarn lint:js --fix\",\r\n \"test\": \"nuxt build && jest\"\r\n },\r\n \"dependencies\": {\r\n \"@nuxtjs/auth-next\": \"5.0.0-1648802546.c9880dc\",\r\n \"@nuxtjs/axios\": \"^5.13.6\",\r\n \"@nuxtjs/dayjs\": \"^1.4.1\",\r\n \"@nuxtjs/i18n\": \"^7.2.2\",\r\n \"@nuxtjs/pwa\": \"^3.3.5\",\r\n \"core-js\": \"^3.23.1\",\r\n \"nuxt\": \"^2.15.8\",\r\n \"nuxt-highcharts\": \"^2.0.4\",\r\n \"vue\": \"^2.6.14\",\r\n \"vue-server-renderer\": \"^2.6.14\",\r\n \"vue-template-compiler\": \"^2.6.14\",\r\n \"vued3tree\": \"^5.1.0\",\r\n \"vuetify\": \"^2.6.6\",\r\n \"vuetify-confirm\": \"^2.0.6\",\r\n \"vuetify-toast-snackbar-ng\": \"^0.7.5\",\r\n \"vuex\": \"^3.6.2\",\r\n \"webpack\": \"^5.73.0\"\r\n },\r\n \"devDependencies\": {\r\n \"@babel/eslint-parser\": \"^7.18.2\",\r\n \"@nuxt/test-utils\": \"^0.2.2\",\r\n \"@nuxtjs/eslint-config\": \"^10.0.0\",\r\n \"@nuxtjs/eslint-module\": \"^3.1.0\",\r\n \"@nuxtjs/vuetify\": \"^1.12.3\",\r\n \"eslint\": \"^8.18.0\",\r\n \"eslint-config-prettier\": \"^8.5.0\",\r\n \"eslint-plugin-nuxt\": \"^3.2.0\",\r\n \"eslint-plugin-vue\": \"^9.1.1\",\r\n \"glob\": \"^8.0.3\",\r\n \"jest\": \"^28.1.1\",\r\n \"playwright\": \"^1.22.2\",\r\n \"prettier\": \"^2.7.1\"\r\n }\r\n}\r\n```\r\n\r\nAny ideas?\r\n\r\nThank you very much for your help.",[3222],{"name":3223,"color":3224},"v0","4137F6","test-utils","Problem with components","2024-05-01T16:05:18Z","https://github.com/nuxt/test-utils/issues/315",{"labels":3230,"number":3237,"owner":3146,"repository":3146,"state":3179,"title":3238,"updated_at":3239,"url":3240,"score":3241},[3231,3234],{"name":3232,"color":3233},"3.x","29bc7f",{"name":3235,"color":3236},"pending triage","E99695",13385,"Cannot use Tailwindcss classes from composables","2023-01-19T16:54:19Z","https://github.com/nuxt/nuxt/issues/13385",0.77071327,{"description":3243,"labels":3244,"number":3250,"owner":3146,"repository":3147,"state":3179,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Environment\n\nsandbox\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/admiring-herschel-qyt4kh\n\n### Description\n\n`app.config`\n\n```\nbutton: {\n compoundVariants: [\n {\n color: 'primary',\n variant: 'soft',\n class: {\n base: 'text-green-500',\n leadingIcon: 'text-red-500'\n }\n },\n ]\n}\n```\n\nif button defined like without `active` the icon is red, but text is green\n```\n\u003CUButton\n label=\"Label\"\n color=\"primary\"\n variant=\"soft\"\n icon=\"mdi-account\"\n />\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\" />",[3245,3246,3247,3248,3249],{"name":3168,"color":3169},{"name":3143,"color":3144},{"name":3171,"color":3172},{"name":3174,"color":3175},{"name":3177,"color":3175},3972,"Different result than static for active-color & active-variant","2025-08-20T02:08:55Z","https://github.com/nuxt/ui/issues/3972",0.7708505,{"description":3256,"labels":3257,"number":3263,"owner":3146,"repository":3146,"state":3179,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.15.0`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n- With UnoCSS and preflight activated for CSS\r\n\r\n### Reproduction\r\n\r\nSee this repo for reproduction : https://github.com/g4w3l/nuxt3rc10-unocss\r\n\r\n- If you launch the server with `npm run dev`, when you go on `/page1` you see a green button as expected\r\n- If you build it and launch it with \r\n```\r\nnpm run build\r\nnode .output/server/index.mjs\r\n```\r\nThe button on `/page1` goes transparent\r\n\r\n### Describe the bug\r\n\r\nI've put some styles on a button in a component. All works well in `dev` mode, if you inspect the `\u003Cbutton>`, the order of the styles is correct and the `bg-green` is applied : \r\n\r\n\r\nIn built version the order of the styles is inverted, thus the button is transparent : \r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3258,3259,3260],{"name":3232,"color":3233},{"name":3168,"color":3169},{"name":3261,"color":3262},"🔨 p3-minor","FBCA04",14943,"Nuxt RC10 - Reset inline styles take priority on built bundle","2023-01-19T17:42:57Z","https://github.com/nuxt/nuxt/issues/14943",0.77348906,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fUeWiE29gFiiUKSbXrS5LgKAOcttqwZ5y-LO-3DlqLuQ":-1},"/nuxt/ui/3217"]