Migrating from ghl-ui Badge to HighRise Badge

This guide covers migrating ghl-ui UIBadge to HighRise HLBadge. HighRise introduces standardized sizes, a color-first API, and a border option.

Component Implementation Changes

Import Changes

- import { UIBadge } from '@gohighlevel/ghl-ui'
+ import { HLBadge } from '@platform-ui/highrise'

Basic Usage Changes

- <UIBadge id="basic" value="42">
-   <template #content><UIAvatar>JD</UIAvatar></template>
-</UIBadge>
+ <HLBadge id="basic" :value="42" color="red" size="md">
+   <HLAvatar name="Jane Doe" size="md" />
+ </HLBadge>

Props Changes

| ghl-ui Prop | HighRise Prop | Notes | | ------------ | ------------- | -------------------------------------------------------------------------------- | ---- | ---- | ---- | ----- | ----- | ----------------------- | | id | id | Required in both | | type | - | Use color instead | | color | color | HighRise palette (gray, blue, green, red, orange, etc.); default red | | dot | dot | Same meaning; default false | | max | max | Same; default 99 | | processing | processing | Same; default false | | showZero | showZero | Same; default false | | show | show | Same; default true | | value | value | Same; optional | | offset | offset | Same tuple type | | - | size | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs' | 'custom'; default md | | - | border | Adds white border around badge; default false |

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
content	default	Wrapped content now in default slot
value	value	Same meaning for custom badge value

Examples

Value Badge

<template>
  <HLBadge id="messages" :value="120" :max="99" color="blue" size="sm">
    <HLAvatar name="Alex" size="md" />
  </HLBadge>
</template>

Dot Badge

<template>
  <HLBadge id="status" dot color="green">
    <HLAvatar name="Taylor" size="md" />
  </HLBadge>
</template>

Custom Value Slot

<template>
  <HLBadge id="icon-badge" size="xs" :offset="[0, 10]" color="gray">
    <HLAvatar name="Pat" size="md" />
    <template #value>
      <ArrowDownIcon class="w-3 h-3" />
    </template>
  </HLBadge>
</template>

Border + Processing

<template>
  <HLBadge id="processing" :value="7" processing border color="orange">
    <HLAvatar name="Jordan" size="md" />
  </HLBadge>
</template>

Breaking Changes

1. Color-first API — type removed; use color palette instead (default red).
2. Size tokens — new size prop with HighRise tokens (lg..3xs or custom); UI badge had no size prop.
3. Slot rename — content → default; value slot unchanged.
4. Border option — optional border prop adds a white ring around the badge.
5. Defaults shifted — max now defaults to 99; show remains true; showZero remains false.

Best Practices

1. Keep id unique for testing hooks.
2. Use color to convey status; avoid arbitrary strings outside the HighRise palette.
3. Set max for large counts and rely on the value slot only for icons/custom glyphs.
4. Choose size to match the wrapped content; avoid custom unless design requires it.
5. Use border when the badge overlays light imagery to maintain contrast.

MCPs: prefer color over legacy type; keep counts numeric unless using the value slot for icons; set max to avoid overflowing digits.