Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Badge

Note

HLbadge is wrapper to be used along with other components like HLAvatar, HLButton etc,. TO show the count, or indicative of a change.

Basic Usage

Small^111555+++

Vue

<template>
  <HLBadge id="basic-badge" :value="400" :max="15">
    <HLAvatar :round="false" size="sm">Small</HLAvatar>
  </HLBadge>
</template>
<script setup>
  import { HLContentWrap, HLBadge, HLAvatar } from '@gohighlevel/highrise'
</script>

Colors

Small⁴⁴⁴⁰⁰⁰

Small⁴⁴⁴⁰⁰⁰

Small⁴⁴⁴⁰⁰⁰

Small⁴⁴⁴⁰⁰⁰

Vue

<template>
  <HLBadge id="color-badge" :value="40" color="blue">
    <HLAvatar :round="false" size="sm">Small</HLAvatar>
  </HLBadge>
</template>
<script setup>
  import { HLBadge, HLAvatar } from '@platform-ui/highrise'
</script>

Dot Badge

Small

Vue

<template>
  <HLBadge id="dot-badge" dot>
    <HLAvatar :round="false" size="sm">Small</HLAvatar>
  </HLBadge>
</template>
<script setup>
  import { HLBadge, HLAvatar } from '@platform-ui/highrise'
</script>

Processing State

Small444000

Vue

<template>
  <HLBadge id="processing-badge" :value="40" processing>
    <HLAvatar :round="false" size="sm">Small</HLAvatar>
  </HLBadge>
</template>
<script setup>
  import { HLBadge, HLAvatar } from '@platform-ui/highrise'
</script>

Sizes

3xs⁶⁶⁶⁰⁰⁰

2xs⁶⁶⁶⁰⁰⁰

xs⁶⁶⁶⁰⁰⁰

sm⁶⁶⁶⁰⁰⁰

md⁶⁶⁶⁰⁰⁰

lg⁶⁶⁶⁰⁰⁰

Custom Size

Custom

Vue

<template>
  <HLBadge id="size-badge" :value="60" size="xs">
    <HLAvatar :round="false" size="sm">Small</HLAvatar>
  </HLBadge>
</template>
<script setup>
  import { HLBadge, HLAvatar } from '@platform-ui/highrise'
</script>

Custom Size

<template>
  <HLBadge id="size-badge" :value="60" size="custom" :offset="[0, 29]" dot>
    <HLAvatar :round="false" size="sm">Custom</HLAvatar>
    <template #value>
      <div class="bg-black" :style="{ width: 10 + 'px', height: 10 + 'px', borderRadius: '50%' }"></div>
    </template>
  </HLBadge>
</template>

Custom Content

Vue

<template>
  <HLBadge id="custom-badge" size="xs" :offset="[0, 10]" color="blue">
    <HLAvatar size="sm" src="https://picsum.photos/seed/FeB6P/640/480"></HLAvatar>
    <template #value>
      <ArrowDownIcon class="text-primary-600 w-3 h-3" />
    </template>
  </HLBadge>
</template>
<script setup>
  import { HLBadge, HLAvatar } from '@platform-ui/highrise'
  import { ArrowDownIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Accessibility

• When the badge conveys data, expose it via aria-label (“3 unread messages”); decorative badges should remain aria-hidden="true".
• Wrap live counts inside aria-live="polite" so updates announce without stealing focus.

Imports

import { HLBadge } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
color	'gray' | 'primary' | 'success' | 'error' | 'warning' | 'gray-blue' | 'blue-light' | 'blue' | 'indigo' | 'purple' | 'pink' | 'rose' | 'orange-dark'	'red'	Color variant of the badge
dot	boolean	false	Show as a dot badge
max	number | undefined	undefined	Maximum value to show
processing	boolean	false	Show processing animation
showZero	boolean	false	Whether to show zero value
show	boolean	true	Control badge visibility
value	number | string | undefined	undefined	Value to display in badge
offset	[number | string, number | string] | undefined	undefined	Offset position of badge
size	'xs' | 'sm' | 'md' | 'lg' | '2xs' | '3xs' | 'custom'	'md'	Size of the badge

Slots

Name	Parameters	Description
default	()	The default content slot
value	()	Custom value content slot