Nuxt•4mo ago

arrow icons in pagination smaller than page buttons

7 Replies

Hi @pearbender. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources do not explicitly mention a known issue or default behavior where the arrow icons (first, prev, next, last) in the Nuxt UI Pagination component are smaller than the page buttons. However, the theming configuration for pagination does show that you can customize the classes for each slot, including the arrow controls and page items, via the ui.pagination.slots property in your app.config.ts or vite.config.ts files. By default, no specific sizing classes are applied to the arrow controls or page items, which could lead to differences if your icon or button styles differ elsewhere in your project. If you notice that the arrow icons are smaller, you can adjust their size by customizing the first, prev, next, and last slots in your configuration. For example:

export default defineAppConfig({
  ui: {
    pagination: {
      slots: {
        first: 'text-lg', // or any Tailwind class to increase size
        prev: 'text-lg',
        next: 'text-lg',
        last: 'text-lg',
        item: 'text-lg'
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    pagination: {
      slots: {
        first: 'text-lg', // or any Tailwind class to increase size
        prev: 'text-lg',
        next: 'text-lg',
        last: 'text-lg',
        item: 'text-lg'
      }
    }
  }
})

This will apply the same size class to both the arrow controls and the page buttons, ensuring consistency in their appearance. Adjust the classes as needed to match your design requirements. For more details on theming and slot customization, see the Pagination Theme documentation and Pagination API. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

pearbenderOP•4mo ago

@kapa.ai seems like the docs have size-5 on their icons just like i do, but their's are 20x20 and mine are 14x14

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, the Nuxt UI documentation examples use the class size-5 on their icons, which corresponds to a 20x20 pixel size in Tailwind CSS (since size-5 is 1.25rem, and 1rem is typically 16px, so 1.25rem = 20px) Icon Component Usage. If your icons are rendering at 14x14 pixels despite using size-5, this suggests that something in your project's CSS or configuration is overriding or affecting the icon size. The documentation does not provide information about a known issue or a difference in how size-5 is interpreted. It is expected that using size-5 should result in 20x20 icons, as shown in the official examples:

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>

Icon Component Usage If you are seeing a different size, please check for: - Custom CSS that might override the size-5 class. - A different base font size in your project (which would affect rem calculations). - Conflicting Tailwind configuration. The knowledge sources do not provide further troubleshooting steps for this specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

pearbenderOP•4mo ago

I put

  icon: {
    size: '20px',

  icon: {
    size: '20px',

in my nuxt.config.ts and it fixed it. Not sure if this is the best way

Cake•4mo ago

tried checking what properties is your size-5 is applying vs theirs?

Gaming

Programming

arrow icons in pagination smaller than page buttons

Did you find this page helpful?