\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.73213106,{"description":3157,"labels":3158,"number":3162,"owner":3149,"repository":3150,"state":3151,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### Description\n\n```\n\u003CUButton\n label=\"Github\"\n to=\"https://github.com/nuxt/ui/\"\n rel=\"noopener noreferrer\"\n/>\n```\nCurrently, `UButton` doesn't have a `rel` attribute, which is required for ... you know.\n\nAlso for some reason, it's already having `target=\"_blank\"` without me even adding it to the element (?)\n\n### Additional context\n\n_No response_",[3159,3160,3161],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4611,"Support for `rel` attributes for `\u003CUButton to=\"\"/>`","2025-07-27T05:16:45Z","https://github.com/nuxt/ui/issues/4611",0.7501569,{"description":3168,"labels":3169,"number":3179,"owner":3149,"repository":3150,"state":3180,"title":3181,"updated_at":3182,"url":3183,"score":3184},"### 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```",[3170,3173,3174,3177],{"name":3171,"color":3172},"bug","d73a4a",{"name":3146,"color":3147},{"name":3175,"color":3176},"closed-by-bot","ededed",{"name":3178,"color":3176},"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.69642484,{"description":3186,"labels":3187,"number":3194,"owner":3149,"repository":3150,"state":3180,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Description\n\nI tried to change the button hover background color but it didn't work:\n`ui({\n ui: {\n button: {\n compoundVariants: [\n {\n color: 'success',\n variant: 'solid',\n class: 'hover:bg-[var(--ui-color-secondary-500)]',\n },\n ],\n },\n },\n }),`",[3188,3191,3192,3193],{"name":3189,"color":3190},"question","d876e3",{"name":3143,"color":3144},{"name":3175,"color":3176},{"name":3178,"color":3176},3217,"change default button opacity on hover","2025-08-20T02:09:29Z","https://github.com/nuxt/ui/issues/3217",0.71897656,{"description":3200,"labels":3201,"number":3207,"owner":3149,"repository":3150,"state":3180,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Description\n\nI am not sure what I am missing, I have added a UBadge into a UDashboardCard but the color/design is wrong:\n\n```html\n \u003CUDashboardCard\n v-if=\"hasDealLinked\"\n title=\"Linked Deal\"\n >\n\n \u003CUBadge\n color=\"red\"\n variant=\"subtle\"\n size=\"xs\"\n >\n {{ linkedItems?.deal.name }}\n \u003C/UBadge>\n \u003C/UDashboardCard>\n```\n\n\nnuxt.config.ts\n```Typescript\n ui: {\n global: true,\n safelistColors: ['red'],\n theme: {\n colors: ['primary', 'secondary', 'info', 'success', 'warning', 'error', 'reverse', 'red']\n }\n },\n```\n\nRender is not a subtle one and border color is never red:\n\n\n\nMany thanks for the help\n",[3202,3203,3206],{"name":3189,"color":3190},{"name":3204,"color":3205},"needs reproduction","CB47CF",{"name":3175,"color":3176},3378,"UBadge Color and variant","2025-05-18T02:13:28Z","https://github.com/nuxt/ui/issues/3378",0.7331986,{"description":3213,"labels":3214,"number":3217,"owner":3149,"repository":3218,"state":3180,"title":3219,"updated_at":3220,"url":3221,"score":3222},"https://www.figma.com/file/OLlmzoVQ7FSBh4FJJORNpl/nuxt.com?node-id=2424%3A12792\n\n- [x] Replace `UPills` component with list of `ULink`\n- [x] `text-base` instead of `text-sm`\n- [x] Remove logo hover in green\n- [x] Login button in primary variant",[3215],{"name":3140,"color":3216},"1ad6ff",114,"nuxt.com","Improve navbar links","2023-02-15T12:30:39Z","https://github.com/nuxt/nuxt.com/issues/114",0.7393478,{"labels":3224,"number":3230,"owner":3149,"repository":3149,"state":3180,"title":3231,"updated_at":3232,"url":3233,"score":3234},[3225,3227],{"name":3140,"color":3226},"8DEF37",{"name":3228,"color":3229},"2.x","d4c5f9",8580,"Different colors for the loading indicator when user has dark mode enabled","2023-07-26T09:16:54Z","https://github.com/nuxt/nuxt/issues/8580",0.74362874,{"description":3236,"labels":3237,"number":3238,"owner":3149,"repository":3239,"state":3180,"title":3240,"updated_at":3241,"url":3242,"score":3243},"`\u003CIcon name=\"uil:github\" color=\"red\" />`\r\nreturns\r\n\r\n**App.config.ts**\r\n```\r\n// https://github.com/nuxt-modules/icon#configuration-%EF%B8%8F\r\nexport default defineAppConfig({\r\n icon: {\r\n size: \"300%\", // default \u003CIcon> size applied\r\n class: \"icon\", // default \u003CIcon> class applied\r\n mode: \"css\", // svg || css\r\n aliases: {\r\n nuxt: \"logos:nuxt-icon\",\r\n },\r\n },\r\n})\r\n```\r\n",[],176,"icon","Add universal support for color attribute (similar to CSS icons)","2024-07-15T16:06:31Z","https://github.com/nuxt/icon/issues/176",0.74423224,{"description":3245,"labels":3246,"number":3251,"owner":3149,"repository":3150,"state":3180,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\n## Why?\nQR codes are widely used in scenarios such as \"sharing links\", \"payment codes\", \"event tickets\", and \"product information\" in enterprise projects (e.g., e-commerce, admin systems, marketing pages). \n\nCurrently, Nuxt UI users need to manually integrate third-party libraries (e.g., `qrcode.vue`, `vue-qrcode-reader`) to implement QR code functions, which has the following pain points:\n- Lack of consistency with Nuxt UI's design system (e.g., theme colors, rounded corners, responsive adaptation).\n- Need to handle compatibility issues between third-party libraries and Nuxt 3 (e.g., SSR support, tree-shaking).\n- No built-in accessibility support (e.g., screen reader prompts, keyboard navigation for QR code download).\n\nAdding an official QRCode component can reduce user development costs and ensure consistency with the Nuxt UI ecosystem.\n\n### Additional context\n\n## What?\n### Basic Features (Must-have)\n- [x] Support dynamic content binding (e.g., bind `value` prop to generate QR code for links/texts like `https://nuxt.com`).\n- [x] Support size customization (via `size` prop, e.g., `size=\"128\"` for 128x128px, default to `160`).\n- [x] Support color customization (via `foregroundColor`/`backgroundColor` props, default to Nuxt UI's `--color-primary` and `--color-background` to fit the theme).\n- [x] Support error correction level (via `errorCorrectionLevel` prop, options: `L`/`M`/`Q`/`H`, default to `M` for common scenarios).\n- [x] SSR compatibility (ensure no client-side only errors when rendering on the server).\n- [x] Basic accessibility (add `aria-label` to describe the QR code content, e.g., \"QR code for Nuxt official website: https://nuxt.com\").\n\n### Advanced Features (Nice-to-have)\n- [ ] Support logo embedding (via `logo` prop, accept image URL; `logoSize` prop to control logo ratio, default to 15% of QR code size).\n- [ ] Support QR code download (built-in `download` method or `showDownloadButton` prop to display a default button, consistent with Nuxt UI's Button component style).\n- [ ] Support border customization (via `borderSize`/`borderColor` props, default to `0` for no border).\n- [ ] Support dark/light mode adaptation (automatically switch `foregroundColor` when color mode changes, if not manually set).\n\n## How?\n### API Design (Proposed)\n| Prop | Type | Default | Description |\n|---------------------|-----------|---------------|----------------------------------------------|\n| `value` | `string` | `required` | The content to generate QR code (e.g., link, text). |\n| `size` | `number` | `160` | QR code size (width = height, unit: px). |\n| `foregroundColor` | `string` | `--color-primary` | QR code block color (supports Tailwind class or hex/rgb). |\n| `backgroundColor` | `string` | `--color-background` | QR code background color. |\n| `errorCorrectionLevel` | `string` | `M` | Error correction level: `L`(7%), `M`(15%), `Q`(25%), `H`(30%). |\n| `logo` | `string` | `undefined` | Logo image URL (if provided, embed in the center). |\n| `logoSize` | `number` | `15` | Logo size ratio (15 = 15% of QR code size). |\n| `showDownloadButton`| `boolean` | `false` | Whether to show a default download button. |\n| `downloadName` | `string` | `qrcode` | File name when downloading (without extension). |\n\n### Usage Example (Pseudo-code)\n```vue\n\u003Ctemplate>\n \u003C!-- Basic usage -->\n \u003CUQRCode \n value=\"https://nuxt.com/ui\" \n size=\"200\"\n aria-label=\"QR code for Nuxt UI official website: https://nuxt.com/ui\"\n />\n\n \u003C!-- With logo and download button -->\n \u003CUQRCode \n value=\"https://github.com/nuxt/ui\"\n logo=\"https://nuxt.com/favicon.ico\"\n logoSize=\"20\"\n showDownloadButton\n downloadName=\"nuxt-ui-qrcode\"\n />\n\u003C/template>",[3247,3248,3249],{"name":3140,"color":3141},{"name":3146,"color":3147},{"name":3250,"color":3144},"v4",4932,"[Component Request] Add QRCode component (support customization & accessibility)","2025-09-09T15:06:36Z","https://github.com/nuxt/ui/issues/4932",0.74513435,{"description":3257,"labels":3258,"number":3262,"owner":3149,"repository":3150,"state":3180,"title":3263,"updated_at":3264,"url":3265,"score":3266},"### Description\n\nCurrently, `defaultVariants` must be set individually per component. While this works in isolation, it leads to repetitive configuration when dealing with common attributes like `size`, `color`, etc., which are shared across multiple components such as `button`, `input`, `select`, `tabs`, `toggle`, `checkbox`, and more.\n\nTo improve developer experience and maintain consistency, it would be valuable to support a global `defaultVariants` configuration like:\n```\nglobal: {\n defaultVariants: {\n color: \"neutral\",\n size: \"sm\",\n },\n}\n```\n### With this setup:\n\n- Any component that supports the listed attributes in the global configuration (e.g., `color`, `size`) will automatically inherit these global default values.\n- Components that do not support a particular variant will simply ignore it.\n\n### Override Behavior:\nIf a component explicitly defines the same attribute in its own `defaultVariants`, the component-specific value should take precedence over the global one. For example:\n```\nglobal: {\n defaultVariants: {\n size: \"sm\",\n },\n},\ncomponents: {\n button: {\n defaultVariants: {\n size: \"md\", // Overrides the global 'sm'\n },\n },\n}\n\n```\n\n### Additional context\n\n_No response_",[3259,3260,3261],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4665,"[Feature Request] Global `defaultVariants` Support for Shared Attributes","2025-08-05T14:01:03Z","https://github.com/nuxt/ui/issues/4665",0.7470781,["Reactive",3268],{},["Set"],["ShallowReactive",3271],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fX4PUSFrt46bwpviC69tnW1LLa0k3-Yx-Q7qaKxi8hDQ":-1},"/nuxt/ui/3307"]