Incorrect compound button variants types

[radqut]

Environment

• Operating System: Linux
• Node Version: v22.13.1
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.8
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.2

Reproduction

https://github.com/nuxt/ui/blob/v3/src/theme/button.ts

Description

I want to customize a button variant by size, trailing and square params. It works, but the types are broken.

The line in the compoundVariants: { size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }

Errors: Type '{ trailingIcon: string; }' is not assignable to type 'string'

Additional context

No response

Logs

[jeannen]

Same issue here!

In the meantime, <!-- @vue-ignore --> above the component in the .vue file removes the linter error

[ziadsarour]

I had the same error, my compoundVariants settings were in the wrong place :

ui: {
  button: {
    slots: {
      compoundVariants: [
        { color: 'primary', variant: 'solid', class: 'text-white' },
        { color: 'success', variant: 'solid', class: 'text-white' },
        { color: 'info', variant: 'solid', class: 'text-white' },
        { color: 'warning', variant: 'solid', class: 'text-white' },
        { color: 'error', variant: 'solid', class: 'text-white' },
      ],
    },
  },
},

changed to

ui: {
  button: {
    slots: {},
    compoundVariants: [
      { color: 'primary', variant: 'solid', class: 'text-white' },
      { color: 'success', variant: 'solid', class: 'text-white' },
      { color: 'info', variant: 'solid', class: 'text-white' },
      { color: 'warning', variant: 'solid', class: 'text-white' },
      { color: 'error', variant: 'solid', class: 'text-white' },
    ],
  },
},