\n\nUnfortunately, `UButton` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3139,3142,3145],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"triage","ffffff",4501,"nuxt","ui","open","Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.72002506,{"description":3157,"labels":3158,"number":3161,"owner":3149,"repository":3150,"state":3151,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### Description\n\nWhen adding `UButton` component with `ghost` or `link` variant inside a `UBanner` with `links` attribute, they remain displayed in black text, even if the banner has a dark background (e.g., primary color). Unlike the Banner close button, which has specific Tailwind classes that adapt it to dark mode (white text), these elements do not automatically adjust their colors.\n\n\n\n```html\n \u003CUBanner to=\"/guide-gouvernance-associative-crise\" icon=\"i-ph-books-duotone\" title=\"Guide Gouvernance Associative\" :actions=\"[{label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'ghost', size: 'md', trailingIcon: 'i-ph-arrow-right'}, {label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'link', size: 'md'}]\" close />\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_",[3159,3160],{"name":3140,"color":3141},{"name":3143,"color":3144},3307,"Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-08-25T13:20:01Z","https://github.com/nuxt/ui/issues/3307",0.7503409,{"description":3167,"labels":3168,"number":3172,"owner":3149,"repository":3150,"state":3151,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### 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?",[3169],{"name":3170,"color":3171},"question","d876e3",4286,"Can UColorModeButton be wrapped in a UTooltip?","2025-06-04T11:52:41Z","https://github.com/nuxt/ui/issues/4286",0.7601843,{"description":3178,"labels":3179,"number":3188,"owner":3149,"repository":3150,"state":3189,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Environment\n\nOperating System: Linux\nNode Version: v18.20.3\nNuxt Version: 3.15.4\nCLI Version: 3.21.1\nNitro Version: 2.10.4\nPackage Manager: pnpm@8.15.6\nBuilder: -\nUser Config: modules\nRuntime Modules: @nuxt/ui@2.21.0\nBuild Modules: -\n\n\n### Version\n\n^2.17.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-um7dcx8a?file=app.vue\n\n### Description\n\nIn a Nuxt project using Nuxt UI, when a u-notification appears over a u-slideover, the notification is not clickable. The issue occurs because the u-slideover element blocks interactions with elements positioned above it. \n\nI have provided a reproduction link above where if you open the slideover, a notification appears after 1 sec and the notification is not interactive (action button does not work).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3180,3183,3186],{"name":3181,"color":3182},"bug","d73a4a",{"name":3184,"color":3185},"closed-by-bot","ededed",{"name":3187,"color":3185},"stale",3214,"closed","Bug: u-notification Not Clickable When Positioned Over u-slideoveror or u-modal","2025-06-18T09:02:21Z","https://github.com/nuxt/ui/issues/3214",0.7432658,{"labels":3195,"number":3201,"owner":3149,"repository":3149,"state":3189,"title":3202,"updated_at":3203,"url":3204,"score":3205},[3196,3198],{"name":3140,"color":3197},"8DEF37",{"name":3199,"color":3200},"2.x","d4c5f9",8749,"Add 'active' and 'exact-active' events to ( nuxt-link ) component","2023-01-22T15:52:45Z","https://github.com/nuxt/nuxt/issues/8749",0.7446209,{"description":3207,"labels":3208,"number":3211,"owner":3149,"repository":3150,"state":3189,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nAFAIK there is currently no documented way to prevent the popover from opening automatically through click or hover.\n\nExample API:\n\n```\n\u003CUPopover mode=\"manual\">\n \u003CUButton>I don't do anything\u003C/UButton\n\u003C/UPopover>\n```\n\n### Additional context\n\nRelated to #721 (but not fixed)",[3209,3210],{"name":3140,"color":3141},{"name":3143,"color":3144},2925,"Popover manual mode with no click nor hover","2025-05-10T17:19:51Z","https://github.com/nuxt/ui/issues/2925",0.7496219,{"labels":3217,"number":3224,"owner":3149,"repository":3149,"state":3189,"title":3225,"updated_at":3226,"url":3227,"score":3228},[3218,3221],{"name":3219,"color":3220},"3.x","29bc7f",{"name":3222,"color":3223},"pending triage","E99695",13911,"Styles of unused components are being imported ","2023-01-19T17:09:15Z","https://github.com/nuxt/nuxt/issues/13911",0.7523938,{"description":3230,"labels":3231,"number":3236,"owner":3149,"repository":3150,"state":3189,"title":3237,"updated_at":3238,"url":3239,"score":3240},"### 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",[3232,3233,3234,3235],{"name":3170,"color":3171},{"name":3143,"color":3144},{"name":3184,"color":3185},{"name":3187,"color":3185},3381,"Uinput not updating inside UTable rows","2025-06-18T09:01:59Z","https://github.com/nuxt/ui/issues/3381",0.7541695,{"description":3242,"labels":3243,"number":3249,"owner":3149,"repository":3150,"state":3189,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### Environment\n\nDevice: iPad Pro 18.1.1\n\n\n\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nhttps://ui.nuxt.com/\n\n### Description\n\n## Dropdown-Menu\n\nhttps://ui3.nuxt.dev/components/dropdown-menu#content\n\n- Pen-clicking an item within the dropdown, no matter the level, does not work\n\nOther components, like `ColorModeSelect` and `LocaleSelect` work.\n\n## Modals\n\nhttps://ui3.nuxt.dev/components/modal#title\n\n- Pen-clicking the \"close\" button on the top right does not work.\n\n## Popover\n\nhttps://ui3.nuxt.dev/components/modal#title\n\n- Touch-clicking \"Open\" does not work\n- Pen-clicking \"Open\" does not work\n\n## ColorPicker\n\nhttps://ui3.nuxt.dev/components/color-picker#usage\n\n- Touch-clicking/dragging does scroll the whole window\n- Pen-clicking/dragging on the vertical scrollbar does scroll the whole window\n\nOther componen ts, like `Slider` does actually work fine in vertical mode.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3244,3245,3246,3247,3248],{"name":3181,"color":3182},{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3184,"color":3185},{"name":3187,"color":3185},3291,"Defects on various components on iOS devices with pen / touch","2025-08-20T02:09:25Z","https://github.com/nuxt/ui/issues/3291",0.75501204,{"description":3255,"labels":3256,"number":3260,"owner":3149,"repository":3150,"state":3189,"title":3261,"updated_at":3262,"url":3263,"score":3264},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/input#loading-icon\n\n### Description\n\nBoth icons, the one shown in the example `i-lucide-repeat-2` and the component's default prop, `i-lucide-refresh-cw` look bad when rotated. I think there's a lot of room for improvement, these icons aren't meant to be animated.\n\nLuckily, there are some Lucide icons which _are_ designed to be animated.\n\nHow about https://lucide.dev/icons/loader-circle?\n\nOr https://lucide.dev/icons/loader?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3257,3258,3259],{"name":3181,"color":3182},{"name":3143,"color":3144},{"name":3146,"color":3147},4162,"`Input`'s default loading icon needs improvement","2025-05-16T16:06:11Z","https://github.com/nuxt/ui/issues/4162",0.75546634,["Reactive",3266],{},["Set"],["ShallowReactive",3269],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4EqUbTfUHGKgnubAFlisqagFUti_l1w34B32UhKzXfU":-1},"/nuxt/ui/3912"]