Add extra large button size

[tobiasdiez]

This function solves the problem (这个功能解决的问题)

Sometimes one needs buttons that are larger than what size="large" produces.

Expected API (期望的 API)

<n-button size="extra-large">
      Not Not Not Small
</n-button>

[07akioni]

If you need a larger one, you can customize it by theme-overrides or CSS. We won't provide a larger builtin one since it's seldom used in most cases.

[tobiasdiez]

Having something like a bigger "Download" button (or a similar "entrance") on the front page seems to be quite common, but okay...

How does one change the size of the button? Something like <n-button type="primary" class="h-16"> doesn't seem to work as the button class overwrites the height class.

[07akioni]

Having something like a bigger "Download" button (or a similar "entrance") on the front page seems to be quite common, but okay...

How does one change the size of the button? Something like <n-button type="primary" class="h-16"> doesn't seem to work as the button class overwrites the height class.

Try this

[tobiasdiez]

Thanks, that solution is also very reusable to ensure consistency.

[cyberwizard-dev]

Having something like a bigger "Download" button (or a similar "entrance") on the front page seems to be quite common, but okay...
How does one change the size of the button? Something like <n-button type="primary" class="h-16"> doesn't seem to work as the button class overwrites the height class.

Try this

Please i am stuck here as well, how do i use custom class??

I have the themeoverrides already but it is not working for Button size, padding etc.

 Button: {
    textColorHover: '#ffffff',
    textColorPressed: '#d0d0d0',
    color: '#50C878',
    colorHover: '#42A967',
    colorPressed: '#38915A',
    colorFocus: '#42A967',
    border: '1px solid #50C878',
    borderHover: '1px solid #42A967',
    borderPressed: '1px solid #38915A',
    borderRadius: '4px',
    fontSize: '20px',
  },

Here is my button..
   <n-button size="large" text class="flex items-center p-3 w-full justify-start !text-base">
            <template #icon>
              <n-icon size="35">
                <BarChartFilled />
              </n-icon>
            </template>
            Dashboard
          </n-button>