Disabled state not passed to variant button

[agatheflorentin]

Environment

Property	Value
Operating system	macOS 25.1.0
CPU	Apple M2 (8 cores)
Node.js version	v24.10.0
nuxt/cli version	3.35.1
Package manager	npm 11.6.2
Nuxt version	4.2.2
Nitro version	2.13.4
Builder	vite 7.3.2
Config	appConfig, app, colorMode, css, devServer, devtools, modules, router, ssr, typescript, ui, vite
Modules	@nuxt/ui 4.6.0, @vueuse/nuxt 14.1.0

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.2.2

Description

When i use variant="button", the <button> element never receives the HTML disabled attribute (it only goes on the hidden <input>)

Reproduction

I'm using :ui so i can force disabled classes

<UFileUpload
          variant="button"
          color="neutral"
          :disabled="disabled"
          :dropzone="false"
          size="xs"
          icon="i-carbon/attachment"
          :ui="{
            base: disabled
              ? '!cursor-not-allowed !text-neutral-500 !opacity-100 !ring-neutral-200 hover:!bg-white'
              : '',
          }"
        />

[Ombrenoirz]

I tried only with disabled, and it's working. Repro

Can you provide yours ?

[agatheflorentin]

I just took a look at your playground and I think I understand what's happening:
if you inspect the code you'll see that the button doesn't get the disabled attribute.
I can see that there is a change of appearance if you change the disabled props in the UFileUpload but the changes must be applied via the disabled input, so when I try to apply new style in the theme, it's not working because i'm trying to use disabled:directly on the button.

This can't work because the button itself is not disabled.:

compoundVariants: [
        {
          variant: 'button',
          class: {
            base: 'border-none ring ring-inset rounded-md disabled:ring-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed',
          }
        },
]

Disabled input:

Enabled input:

It would be easier and more intuitive to customize the disabled appearance if the button could get the disabled attribute directly.

[Ombrenoirz]

In this file FileUpload

Best way to do I think is something like this :

line 360

<component
        :is="variant === 'button' ? 'button' : 'div'"
        ref="dropzoneRef"
        :type="variant === 'button' ? 'button' : undefined"
        :role="variant === 'button' ? undefined : 'button'"
        :data-dragging="isDragging"
        data-slot="base"
        :class="ui.base({ class: props.ui?.base })"
        :tabindex="props.interactive && !disabled ? 0 : -1"
        :disabled="variant === 'button' ? disabled : undefined" // It takes the disabled prop here
        @click="props.interactive && !disabled && open()"
        @keydown.space.prevent
        @keyup.enter.space="props.interactive && !disabled && open()"
      >

I don't know if it'll work great because by default it's a div.