Skip to content

Accessibility: Work in progress

Translations: Not Needed

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

Small111555+++
Vue
html
<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

Small444000
Small444000
Small444000
Small444000
Vue
html
<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
html
<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
html
<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

Small666000
Small666000
Small666000
Small666000
Vue
html
<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 Content

Vue
html
<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>

Imports

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

Props

NameTypeDefaultDescription
id *string | undefinedundefinedThe 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
dotbooleanfalseShow as a dot badge
maxnumber | undefinedundefinedMaximum value to show
processingbooleanfalseShow processing animation
showZerobooleanfalseWhether to show zero value
showbooleantrueControl badge visibility
type'default' | 'success' | 'error' | 'warning' | 'info''default'Type of the badge
valuenumber | string | undefinedundefinedValue to display in badge
offset[number | string, number | string] | undefinedundefinedOffset position of badge
size'xs' | 'sm' | 'md' | 'lg''md'Size of the badge

Slots

NameParametersDescription
default()The default content slot
value()Custom value content slot