Nuxt•4w ago

UBadge leading and trailing slots don't work

Using code copied directly from the docs and the leading and trailing slots aren't doing anything. What could I be missing? Here's a repro: https://stackblitz.com/edit/nuxt-ui-uwexr7?file=app.vue

bask-digital

StackBlitz

Nuxt UI - Playground (forked) - StackBlitz

Playground of Nuxt UI, a UI library powered by Headless UI and Tailwind CSS for Nuxt.

3 Replies

kapa.ai•4w ago

Hi @manbartz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but it seems there's a misunderstanding in your question. The UBadge component in Nuxt UI doesn't actually have leading and trailing slots. Let me explain: 1. According to the Badge documentation (https://ui.nuxt.com/components/badge), the UBadge component doesn't have leading or trailing slots. It only has a default slot for the badge content or a label prop. 2. The leading and trailing slots you might be thinking of are actually features of other components like UButton (https://ui.nuxt.com/components/button#slots), UInput (https://ui.nuxt.com/components/input#slots), or USelect (https://ui.nuxt.com/components/select#slots). 3. For the UBadge component, you can only customize its content, color, variant, and size. Here's an example of how to use it correctly:

<template>
  <UBadge color="primary" variant="solid">Badge Content</UBadge>
</template>

<template>
  <UBadge color="primary" variant="solid">Badge Content</UBadge>
</template>

If you want to add icons or other content before or after the badge text, you would need to include them within the default slot or as part of the label prop. If you're trying to achieve a specific layout or design with the badge, you might need to wrap it in another component or use a different component altogether that supports leading and trailing slots. I hope this clarifies the issue. If you have any other questions about using the UBadge or other Nuxt UI components, please feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

manbartzOP•4w ago

It does have leading/trailing slots, as described here in this link: https://ui.nuxt.com/components/badge#leading

Gaming

Programming

UBadge leading and trailing slots don't work