UIBadge

UIBadge

A versatile badge component that can be used to display status indicators, counters, and notifications with support for different types, positions, and customizations.

<template>
  <UIBadge
    :type="type"
    :value="value"
    :offset="offset"
    :max="99"
    :dot="showDot"
    :processing="isProcessing"
  >
    <UIAvatar />
  </UIBadge>
</template>

<script setup lang="ts">
const type = ref('default')
const value = ref(5)
const offset = ref([0, 0])
const showDot = ref(false)
const isProcessing = ref(false)
</script>

Props

• id (string, required): Unique identifier
• type (‘default’ | ‘success’ | ‘error’ | ‘warning’ | ‘info’): Badge type
• value (string | number): Badge content
• color (string): Custom badge color
• dot (boolean): Show as dot
• max (number): Maximum value to show
• processing (boolean): Show processing animation
• showZero (boolean): Show badge when value is zero
• show (boolean): Control badge visibility
• offset ([number | string, number | string]): Badge position offset

Slots

• content: Content to attach badge to
• value: Custom badge content

Usage Examples

1. Basic Badge:

<template>
  <UIBadge value="New">
    <UIButton>Notifications</UIButton>
  </UIBadge>
</template>

2. Status Indicator:

<template>
  <UIBadge
    :dot="true"
    type="success"
    :offset="[-2, -2]"
  >
    <UIAvatar
      src="user-avatar.jpg"
      size="md"
    />
  </UIBadge>
</template>

3. Counter Badge:

<template>
  <UIBadge
    :value="notificationCount"
    :max="99"
    type="error"
  >
    <BellIcon class="w-6 h-6" />
  </UIBadge>
</template>

<script setup>
const notificationCount = ref(150)
</script>

4. Custom Styling:

<template>
  <UIBadge
    value="Premium"
    color="#FFD700"
    :offset="[0, -8]"
  >
    <div class="p-4 border rounded">
      Premium Content
    </div>
  </UIBadge>
</template>

5. Processing State:

<template>
  <UIBadge
    :dot="true"
    :processing="true"
    type="warning"
  >
    <UIAvatar>
      <template #overlay>
        <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
          <UISpinner size="sm" class="text-white" />
        </div>
      </template>
    </UIAvatar>
  </UIBadge>
</template>

Best Practices

1. Visual Design:

   • Use appropriate colors for different states
   • Maintain consistent sizing
   • Ensure good contrast
   • Consider badge placement

2. User Experience:

   • Clear and readable content
   • Appropriate max values
   • Smooth animations
   • Responsive layout

3. Accessibility:

   • Include ARIA labels
   • Sufficient color contrast
   • Screen reader support
   • Keyboard navigation

4. Common Use Cases:

   • Notification counters
   • Status indicators
   • Feature badges
   • Online/offline status

Component Composition

The UIBadge component works well with:

• UIAvatar for user status
• UIButton for action indicators
• UIIcon for notifications
• UIMenu for counts
• UITabs for updates
• UIList for item status

Translation Support

<template>
  <UIBadge
    :value="$t('badge.value')"
    :type="type"
  >
    {{ $t('badge.content') }}
  </UIBadge>
</template>

Mobile Considerations

1. Touch Targets:

   • Ensure sufficient spacing
   • Appropriate badge size
   • Clear visibility
   • Touch feedback

2. Responsive Behavior:

   • Adapt to screen size
   • Maintain readability
   • Consider orientation
   • Handle overflow

Error Handling

1. Value Validation:

   • Handle empty values
   • Validate numbers
   • Check max limits
   • Format display

2. Type Safety:

   • Validate prop types
   • Handle edge cases
   • Provide defaults
   • Clear error states