How do I change the padding of all buttons globally?

[Gonzalo-Bruna]

Description

I am new using Nuxt UI, and I am loving it.
I personally believe buttons look better when they are wider than taller, therefore I like to add more padding in the x axis, but I don't want to do this for each button.

I am currently doing it like this:

<UButton
    to="/login"
    size="xl"
    color="warning"
    variant="solid"
    class="font-semibold px-4"
 >
     Iniciar sesión
    </UButton>

but I don't know how to add the option for all buttons.
I tried doing this in the app.config.ts:

ui: {
    button: {
        slots: {
          base: 'px-4 cursor-pointer'
    },
}
      

and the cursor-pointer worked, but the px-4 didn't work. Any idea on how to make this work?

[jwoertink]

If you add an important on it, it should work. Not necessarily the "cleanest" way I've found, but it will at least let you move on and come back later if there's a better option.

ui: {
  button: {
    slots: {
      base: '!px-4 cursor-pointer'
    }
  }
}

[benjamincanac]

It's one way of doing it but I'd recommend overriding each size instead:

export default defineAppConfig({
  ui: {
    button: {
      variants: {
        size: {
          xs: {
            base: 'px-2 py-1'
          },
          sm: {
            base: 'px-2.5 py-1.5'
          },
          md: {
            base: 'px-2.5 py-1.5'
          },
          lg: {
            base: 'px-3 py-2'
          },
          xl: {
            base: 'px-3 py-2'
          }
        }
      }
    }
  }
})

This example demonstrates the defaults but you can change it to whatever you want. Here's the full button theme: https://ui.nuxt.com/components/button#theme

[Gonzalo-Bruna]

Isn't there a more "global" way to do this? and not having to override every single size?

[benjamincanac]

Is the solution mentioned above by @jwoertink not working out for you?

[Gonzalo-Bruna]

Oh, my bad—it’s actually working. I just felt like this approach was a bit 'hacky'; I usually prefer native solutions. Also, for things like inputs, having global settings to adjust paddings would be really useful. I actually had a hard time trying to set a global padding for the input component and couldn't get it to work at all.