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+++
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
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
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
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
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
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
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 |
type | 'default' | 'success' | 'error' | 'warning' | 'info' | 'default' | Type of the badge |
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' | 'md' | Size of the badge |
Slots
Name | Parameters | Description |
---|---|---|
default | () | The default content slot |
value | () | Custom value content slot |