How can I override the value of a CSS variable for an element?

The value of any CSS variable can be overridden using CSS:

.some-selector {
  --my-var: newValue
}

where newValue is an actual value which makes sense in your case and .some-selector is a selector in charge of applying the change only to the elements you want.

Note: overriding the value of a CSS variable on an element also applies (cascades down) to all its children (that's how CSS works and why it's called CSS - Cascading Style Sheets).

So, to edit it for all buttons,

.p-button {
  --p-button-padding-y: 0.25em;
}

...will do (0.25em is an example. Use whatever you need).

If you only want it applied on a particular button, you could either apply it inline:

<Button 
  :style="{
    '--p-button-padding-y': '0.25em'
  }"
/>

or using a dedicated class:

<template>
  <Button class="my-button" />
</template>
<style>
.p-button.my-button {
  --p-button-padding-y: 0.25em;
}
</style>

Notes:

1. you might need selectors with a slightly higher specificity, depending on your current custom CSS and/or how you load PrimeVue.
2. From what you're showing, I'm not sure it's the button's padding that's causing it to be taller, but the caret's (padding, font-size or line-height).