N
Nuxt•4mo ago
Uchuu

Why is my custom badge colour not being reflected when I use the custom badge?

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  label: String,
  category: {
    type: String,
    required: true
  }
})

const colorMap = {
  Cardiology: {
    bg: '#FFEBEE',
    text: '#C62828',
    ring: '#FFCDD2'
  },
  Neurology: {
    bg: '#E3F2FD',
    text: '#1565C0',
    ring: '#BBDEFB'
  },
  Dermatology: {
    bg: '#F3E5F5',
    text: '#6A1B9A',
    ring: '#E1BEE7'
  },
  Paediatrics: {
    bg: '#FFF3E0',
    text: '#EF6C00',
    ring: '#FFE0B2'
  },
  Surgery: {
    bg: '#E8F5E9',
    text: '#2E7D32',
    ring: '#C8E6C9'
  }
}

const style = computed(() => {
  const c = colorMap[props.category] || {
    bg: '#ECEFF1', text: '#37474F', ring: '#CFD8DC'
  }
  return {
    base: `bg-[${c.bg}] text-[${c.text}] ring-[${c.ring}]`
  }
})
</script>

<template>
  <UBadge :ui="style">{{ label || category }}</UBadge>
</template>
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  label: String,
  category: {
    type: String,
    required: true
  }
})

const colorMap = {
  Cardiology: {
    bg: '#FFEBEE',
    text: '#C62828',
    ring: '#FFCDD2'
  },
  Neurology: {
    bg: '#E3F2FD',
    text: '#1565C0',
    ring: '#BBDEFB'
  },
  Dermatology: {
    bg: '#F3E5F5',
    text: '#6A1B9A',
    ring: '#E1BEE7'
  },
  Paediatrics: {
    bg: '#FFF3E0',
    text: '#EF6C00',
    ring: '#FFE0B2'
  },
  Surgery: {
    bg: '#E8F5E9',
    text: '#2E7D32',
    ring: '#C8E6C9'
  }
}

const style = computed(() => {
  const c = colorMap[props.category] || {
    bg: '#ECEFF1', text: '#37474F', ring: '#CFD8DC'
  }
  return {
    base: `bg-[${c.bg}] text-[${c.text}] ring-[${c.ring}]`
  }
})
</script>

<template>
  <UBadge :ui="style">{{ label || category }}</UBadge>
</template>
3 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Uchuu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your custom badge color is not being reflected because the Nuxt UI Badge component does not support arbitrary color values via Tailwind's arbitrary value syntax (e.g., bg-[#FFEBEE]) when passed through the ui prop. The ui prop is designed to override specific slot classes, but the Badge component's color system is based on predefined color variants (primary, success, error, etc.) and their associated CSS variables and Tailwind classes, not arbitrary hex values. From the documentation, the color prop only accepts specific string values: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral", and the component's theme is built around these variants. The ui prop can override slot classes, but it expects Tailwind classes or class names, not arbitrary inline styles or dynamic Tailwind values. Arbitrary values like bg-[#FFEBEE] are not guaranteed to be recognized or generated by Tailwind unless explicitly safelisted in your Tailwind config, and even then, the Badge component may not apply them as you expect due to its internal class merging and variant logic Badge Usage & API. How to fix: - If you want to use custom colors, you should either: 1. Extend your Tailwind config to include custom color classes and use those class names. 2. Use inline style bindings directly on the UBadge component, but this will not integrate with the Badge's variant system. 3. Stick to the supported color variants and customize their values via the Nuxt UI theming system and CSS variables CSS Variables & Theming. Example using supported color system: 
<UBadge color="primary" variant="solid">{{ label || category }}</UBadge>
<UBadge color="primary" variant="solid">{{ label || category }}</UBadge>
Or, if you want to override styles, use the class prop for direct styling: 
<UBadge :class="`bg-[#FFEBEE] text-[#C62828] ring-[#FFCDD2]`">{{ label || category }}</UBadge>
<UBadge :class="`bg-[#FFEBEE] text-[#C62828] ring-[#FFCDD2]`">{{ label || category }}</UBadge>
But be aware that this approach may not work as expected due to how Nuxt UI merges classes and applies variants. Summary:
The Nuxt UI Badge component is not designed to accept arbitrary color values via the ui prop. For custom colors, use the theming system or extend Tailwind's color palette and use the supported color prop values Badge Theme, CSS Variables. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@1035470271441805353> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Cake
Cake•4mo ago
instead of 
    bg: '#FFEBEE',
    bg: '#FFEBEE',
then bg-[${c.bg}] do 
bg: 'bg-[#FFEBEE]'
bg: 'bg-[#FFEBEE]'
then ${c.bg} directly https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names

Did you find this page helpful?