Nuxt•3mo ago

change in button sizes from nuxt-ui 3 latest to 4.0.0.alpha 1

has there been a change in the default scales or sizes or themes or something.. a component has suddenly seen the icon buttons including the hanburger icon in dshboardmenubar and colorbutton and regular iconbutton all grow compared to before update but the navbar title stayed the same size 🤔

11 Replies

kapa.ai•3mo ago

Hi @SamKaizen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about changes to button sizes, default scales, or theme adjustments between Nuxt UI 3 (latest) and 4.0.0.alpha 1. The provided documentation covers the theming system, how to override styles, and the structure of component themes, but it does not mention any breaking changes or updates to the default sizing of buttons or icon buttons between these specific versions. If you have observed a visual change in button or icon sizes after updating, it may be due to internal changes in the component themes or default variants, but this is not documented in the sources provided. For precise details on version-to-version changes, you may want to check the official changelog or GitHub repository for release notes, as the documentation here does not cover this specific update scenario. If you need to adjust the button sizes, you can override the default variants or slot classes in your app.config.ts or vite.config.ts as described in the theming documentation Getting-started > Components theme and Config. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•3mo ago

@kapa.ai can you compare the default theme objects for the button in https://ui4.nuxt.com/docs/components/button#theme and https://ui.nuxt.com/docs/components/button#theme

Nuxt UI

Vue Button Component - Nuxt UI

A button element that can act as a link or trigger an action.

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources provided do not contain the default theme object for the button component from https://ui4.nuxt.com/docs/components/button#theme (Nuxt UI 4.x). They only include the theme object for the button component from https://ui.nuxt.com/components/button#theme (Nuxt UI 3.x). From the Nuxt UI 3.x documentation, the default theme object for the button component includes: - Variants for color, variant, and size (with classes for each combination) - Compound variants for combinations like color + variant, size + square, and loading states - Default variants:

  defaultVariants: {
    color: 'primary',
    variant: 'solid',
    size: 'md'
  }

  defaultVariants: {
    color: 'primary',
    variant: 'solid',
    size: 'md'
  }

- The ability to override these via app.config.ts or vite.config.ts
Button Theme - Nuxt UI 3.x However, there is no information in the knowledge sources about the default theme object for the button component in Nuxt UI 4.x, so I cannot provide a comparison or details about changes between the two versions. If you need a direct comparison, please provide the theme object from the Nuxt UI 4.x documentation, or consult the official documentation for Nuxt UI 4.x. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•3mo ago

@kapa.ai i think the change is only for buttons with icons or maybe just the icons?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, there is no explicit mention of a change specifically to the size of buttons with icons or to icon sizes themselves between Nuxt UI 3 and 4. The documentation does detail how button and icon sizes are controlled via the theme system, with size variants (e.g., xs, sm, md, lg, xl) and slot classes for icons (such as leadingIcon, trailingIcon) that can be customized globally or per-component using the ui prop or theme overrides in your configuration files Getting-started > Components theme Config. If you are seeing a change in icon or icon button sizes after an update, it could be due to an internal update to these slot classes or their default values, but the knowledge sources do not confirm or document such a change. You can always override icon sizes using the ui prop or by updating your theme configuration as described in the documentation. In summary:
The knowledge sources do not explicitly confirm a change to icon or icon button sizes, but they do provide mechanisms for you to control these styles if needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•3mo ago

@kapa.ai how's the default sizing for icon determined in a uicon

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly document how the default sizing for an icon is determined in a UIcon component. The UIcon documentation states that you can set the icon size using the size prop, which accepts a string or number, but it does not specify a default value for this prop or describe the internal default sizing logic. If you do not provide a size prop, the icon will use its default styling, which is not detailed in the available documentation. For custom sizing, you are encouraged to use the size prop or apply a CSS class (e.g., class="size-5") to control the icon's appearance. I'm sorry, but there's no information in the knowledge sources about the exact default size used by UIcon if the size prop is not set UIcon documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

change in button sizes from nuxt-ui 3 latest to 4.0.0.alpha 1

Did you find this page helpful?