Skip to main content
The BBadge component is a molecule that wraps Nuxt UI’s UBadge with a flexible styling system. It allows you to define multiple style variants and switch between them dynamically.

​
Props

​
label
string
required
The label text to display on the badge
​
value
string
default:""
The active style variant key from the styles object. Determines which style configuration to apply.
​
styles
BadgeStyles
default:"{}"
Custom style settings for different badge variants. Each key maps to a partial UBadge props object.
​
defaultStyle
BadgeStyles[string]
Default style configuration to use when value doesn’t match any key in styles

​
Slots

​
[name: string]
Any dynamic slots are passed through to the underlying UBadge component

​
Type Definitions

export type BadgeSize = InstanceType<typeof UBadge>['$props']['size']
export type BadgeColor = InstanceType<typeof UBadge>['$props']['color']
export type BadgeVariant = InstanceType<typeof UBadge>['$props']['variant']

interface BadgeStyles {
  [key: string]: Partial<InstanceType<typeof UBadge>['$props']> & { [key: string]: any }
}

​
Usage

​
Basic Usage with Styles

<template>
  <BBadge 
    label="Active"
    value="active"
    :styles="badgeStyles"
  />
</template>

<script setup>
const badgeStyles = {
  active: {
    color: 'success',
    variant: 'soft',
    icon: 'i-lucide-check'
  },
  inactive: {
    color: 'neutral',
    variant: 'outline'
  },
  error: {
    color: 'error',
    variant: 'solid',
    icon: 'i-lucide-alert-circle'
  }
}
</script>

​
With Default Style

<template>
  <BBadge 
    label="Unknown Status"
    value="unknown"
    :styles="badgeStyles"
    :default-style="{ color: 'neutral', variant: 'soft' }"
  />
</template>

​
Dynamic Status Badge

<template>
  <BBadge 
    :label="statusLabel"
    :value="status"
    :styles="statusStyles"
  />
</template>

<script setup>
const status = ref('pending')
const statusLabel = computed(() => status.value.toUpperCase())

const statusStyles = {
  pending: { color: 'warning', variant: 'soft' },
  approved: { color: 'success', variant: 'solid' },
  rejected: { color: 'error', variant: 'solid' }
}
</script>

​
Priority Levels

<template>
  <div class="flex gap-2">
    <BBadge 
      label="Low"
      value="low"
      :styles="priorityStyles"
    />
    <BBadge 
      label="High"
      value="high"
      :styles="priorityStyles"
    />
  </div>
</template>

<script setup>
const priorityStyles = {
  low: { color: 'neutral', variant: 'outline', size: 'sm' },
  medium: { color: 'warning', variant: 'soft', size: 'sm' },
  high: { color: 'error', variant: 'solid', size: 'sm' }
}
</script>

​
How It Works

The component uses this logic to determine which styles to apply: 
<UBadge :label="label" v-bind="styles[value] ?? props.defaultStyle" />
  1. Looks up styles[value]
  2. If found, applies those styles
  3. If not found, falls back to defaultStyle
  4. All matched styles are spread as props to UBadge

​
Slot Forwarding

All slots are automatically forwarded to the underlying UBadge component: 
<template v-for="(_, name) in $slots" v-slot:[name]="slotData">
  <slot :name="name" v-bind="slotData" />
</template>
Source: /home/daytona/workspace/source/app/components/b/badge/b-badge.vue:52

Build docs developers (and LLMs) love

Get started for freeTalk to us