Migrating from ghl-ui Tag to HighRise Tag

HighRise HLTag replaces UITag with semantic colors, checkbox/selectable support, optional dropdown affordance, count badges, truncation, and an avatar slot. IDs are optional; provide them only when you need to reference the element.

Component Implementation Changes

Import Changes

diff

- import { UITag } from '@gohighlevel/ghl-ui'
+ import { HLTag } from '@platform-ui/highrise'

Basic Usage Changes

Basic Tag

diff

- <UITag>Basic Tag</UITag>
+ <HLTag color="gray" size="sm">Basic Tag</HLTag>

Type/Color Variants

diff

- <UITag type="success">Success</UITag>
- <UITag type="warning">Warning</UITag>
- <UITag type="error">Error</UITag>
- <UITag type="info">Info</UITag>
+ <HLTag color="green">Success</HLTag>
+ <HLTag color="orange">Warning</HLTag>
+ <HLTag color="red">Error</HLTag>
+ <HLTag color="blue">Info</HLTag>

With Icon

diff

- <UITag type="success">
-   <template #icon>
-     <CheckIcon class="w-4 h-4" />
-   </template>
-   Success
- </UITag>
+ <HLTag color="green" size="sm">
+   <template #icon>
+     <CheckIcon />
+   </template>
+   Success
+ </HLTag>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
`type`	`color`	Map UI types: default→gray, primary→blue, success→green, warning→orange, error→red, info→blue
`size` (`small` \| `medium` \| `large`)	`size` (`xs` \| `sm` \| `md` \| `lg`)	Defaults to `sm`; choose the closest match
`closable`	`closable`	Same behavior
`round`	`round`	Same behavior
`bordered`	`bordered`	Same behavior (default `true`)
`groupPosition`	–	Removed; use separate tags or layout wrappers
`id` (required)	`id` (optional)	Provide when referenced elsewhere
–	`checkbox`, `checked`	Enable selectable tags; combine with `v-model:checked`
–	`interactive`	Toggle hover/click affordance; defaults to `true` unless disabled
–	`dropdown`	`'open'` \| `'close'` \| `false` to show a caret indicator
–	`count`	Numeric badge on the tag
–	`avatarProps`	Pass avatar props to the `avatar` slot
–	`truncate`, `maxWidth`	Truncate label and show tooltip via `HLEllipsis`
–	`disabled`	Disable interactions

Events

ghl-ui Event	HighRise Event	Notes
`close`	`close`	Payload `{ event?: Event; id?: string }`
`click`	–	Use `v-model:checked`/`@checked` for interactions
–	`checked`	Emits boolean when tag toggles selection

Slots

ghl-ui Slot	HighRise Slot	Notes
`default`	`default`	Main content
`icon`	`icon`	Same usage
`group`	–	Removed; compose with multiple tags
–	`avatar`	New slot for avatar content

Examples

Basic Tag with Colors

vue

<template>
  <div class="flex gap-2">
    <HLTag color="gray" size="sm">Default</HLTag>
    <HLTag color="blue" size="sm">Primary</HLTag>
    <HLTag color="green" size="sm">Success</HLTag>
    <HLTag color="red" size="sm">Error</HLTag>
    <HLTag color="orange" size="sm">Warning</HLTag>
  </div>
</template>

Selectable Tag (Checkbox Mode)

vue

<template>
  <HLTag color="blue" size="md" checkbox v-model:checked="isChecked" @checked="handleChecked"> Selectable Tag </HLTag>
</template>

<script setup>
import { ref } from 'vue'
import { HLTag } from '@platform-ui/highrise'

const isChecked = ref(false)
const handleChecked = checked => {
  console.log('Tag checked:', checked)
}
</script>

Closable Tag with Icon

vue

<template>
  <HLTag color="green" size="md" closable @close="handleClose">
    <template #icon>
      <CheckIcon />
    </template>
    Closable Tag
  </HLTag>
</template>

<script setup>
import { HLTag } from '@platform-ui/highrise'
import { CheckIcon } from '@gohighlevel/ghl-icons/24/outline'

const handleClose = () => {
  console.log('Tag closed')
}
</script>

Truncated Tag with Count

vue

<template>
  <HLTag color="indigo" size="sm" :count="12" truncate :max-width="120"> Very long tag label that should truncate nicely </HLTag>
</template>

Best Practices

Map UI type values to semantic color tokens for consistency.
Use v-model:checked when the tag represents a selection state; set interactive="false" for static tags.
Prefer truncate + maxWidth for long labels instead of manual CSS.
Provide id only when referenced externally (e.g., analytics, aria-labelledby).
Pair avatar or count with concise labels to keep tag height compact.

Migrating from ghl-ui Tag to HighRise Tag

This guide will help you migrate from the ghl-ui Tag component to the new HighRise Tag component. The Tag component has been completely redesigned with enhanced accessibility, consistent sizing, improved customization options, and better integration with the HighRise design system.

Component Implementation Changes

Import Changes

diff

- import { UITag } from '@gohighlevel/ghl-ui'
+ import { HLTag } from '@platform-ui/highrise'

Basic Usage Changes

Basic Tag

diff

- <UITag>Basic Tag</UITag>
+ <HLTag id="basic-tag" size="sm" color="gray">
+   Basic Tag
+ </HLTag>

Type/Color Variants

diff

- <UITag type="success">Success</UITag>
- <UITag type="warning">Warning</UITag>
- <UITag type="error">Error</UITag>
- <UITag type="info">Info</UITag>

+ <HLTag id="success-tag" color="green">Success</HLTag>
+ <HLTag id="warning-tag" color="orange">Warning</HLTag>
+ <HLTag id="error-tag" color="red">Error</HLTag>
+ <HLTag id="info-tag" color="blue">Info</HLTag>

With Icon

diff

- <UITag type="success">
-   <template #icon>
-     <CheckIcon class="w-4 h-4" />
-   </template>
-   Success
- </UITag>

+ <HLTag id="icon-tag" color="green" size="sm">
+   <template #icon>
+     <CheckIcon />
+   </template>
+   Success
+ </HLTag>

With Group (Migration Path)

diff

- <UITag type="info">
-   <template #group>Status</template>
-   Active
- </UITag>

+ <!-- Replace with combination of tags or custom styling -->
+ <div class="flex items-center">
+   <HLTag id="group-label" color="gray" size="sm" :interactive="false">Status</HLTag>
+   <HLTag id="group-value" color="blue" size="sm">Active</HLTag>
+ </div>

Props Changes

Required Props

ghl-ui Prop	HighRise Prop	Notes
-	`id`	New required prop for accessibility

Modified Props

ghl-ui Prop	HighRise Prop	Notes
`type`	`color`	Changed to use semantic color system
`size`	`size`	New size system ('xs', 'sm', 'md', 'lg')
`groupPosition`	-	Removed, use separate tags or custom styling

New Props

Prop	Type	Default	Description
`checkbox`	`boolean`	false	Enable checkbox mode
`checked`	`boolean`	false	Control checkbox state
`count`	`number`	undefined	Display count badge
`interactive`	`boolean`	true	Enable hover/click states
`dropdown`	`'open' \| 'close' \| false`	false	Show dropdown indicator
`disabled`	`boolean`	false	Disable tag interactions
`avatarProps`	`HLAvatarProps`	undefined	Props for avatar slot

Color Mapping

ghl-ui Type	HighRise Color
'default'	'gray'
'primary'	'blue'
'success'	'green'
'warning'	'orange'
'error'	'red'
'info'	'blue'

Size Mapping

ghl-ui Size	HighRise Size	Notes
'small'	'sm'	Standard small size
'medium'	'md'	Standard medium size
'large'	'lg'	Standard large size
-	'xs'	New: Extra small size

Emits Changes

ghl-ui Event	HighRise Event	Notes
`close`	`close`	Now includes tag ID in payload
`click`	-	Removed, use `checked` event for interaction
-	`checked`	New: Emitted when tag is checked/unchecked

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
`default`	`default`	Main content (unchanged)
`icon`	`icon`	Icon content (unchanged)
`group`	-	Removed, use separate tags
-	`avatar`	New: Avatar content

Examples

Basic Tag with Different Colors

vue

<template>
  <div class="flex gap-2">
    <HLTag id="gray-tag" color="gray" size="sm">Default</HLTag>
    <HLTag id="blue-tag" color="blue" size="sm">Primary</HLTag>
    <HLTag id="green-tag" color="green" size="sm">Success</HLTag>
    <HLTag id="red-tag" color="red" size="sm">Error</HLTag>
    <HLTag id="orange-tag" color="orange" size="sm">Warning</HLTag>
  </div>
</template>

<script setup>
import { HLTag } from '@platform-ui/highrise'
</script>

Interactive Tag with Checkbox

vue

<template>
  <HLTag id="checkbox-tag" color="blue" size="md" checkbox v-model:checked="isChecked" @checked="handleChecked"> Selectable Tag </HLTag>
</template>

<script setup>
import { ref } from 'vue'
import { HLTag } from '@platform-ui/highrise'

const isChecked = ref(false)
const handleChecked = checked => {
  console.log('Tag checked:', checked)
}
</script>

Closable Tag with Icon

vue

<template>
  <HLTag id="closable-tag" color="green" size="md" closable @close="handleClose">
    <template #icon>
      <CheckIcon />
    </template>
    Closable Tag
  </HLTag>
</template>

<script setup>
import { HLTag } from '@platform-ui/highrise'
import { CheckIcon } from '@gohighlevel/ghl-icons/24/outline'

const handleClose = () => {
  console.log('Tag closed')
}
</script>

Tag with Count and Avatar

vue

<template>
  <HLTag id="avatar-tag" color="indigo" size="md" :count="5">
    <template #avatar>
      <HLAvatar id="tag-avatar" name="John Doe" size="sm" />
    </template>
    User Tag
  </HLTag>
</template>

<script setup>
import { HLTag, HLAvatar } from '@platform-ui/highrise'
</script>

Breaking Changes

Required ID
- New required id prop for accessibility
- Must be unique within the page
Color System
- Replaced type with color prop
- New semantic color options
- More consistent color palette
Size System
- New size options ('xs', 'sm', 'md', 'lg')
- More consistent sizing across components
- Added extra small size option
Group Feature
- Removed group slot and positioning
- Use separate tags or custom styling instead
Event Changes
- Removed generic click event
- Added checked event for interaction
- Modified close event payload
Interaction Model
- New checkbox mode for selection
- Added dropdown feature
- Explicit interactive state control
Styling System
- Uses CSS variables
- New theming approach
- Consistent with HighRise design system

Best Practices

Always provide unique id props
Use semantic colors appropriately
Choose appropriate sizes for context
Handle events properly
Consider mobile touch targets
Keep content concise
Use proper spacing
Follow accessibility guidelines
Maintain consistent styling
Document component usage

Migrating from ghl-ui Tag to HighRise Tag ​

Component Implementation Changes ​

Import Changes ​

Basic Usage Changes ​

Basic Tag ​

Type/Color Variants ​

With Icon ​

Props Changes ​

Events ​

Slots ​

Examples ​

Basic Tag with Colors ​

Selectable Tag (Checkbox Mode) ​

Closable Tag with Icon ​

Truncated Tag with Count ​

Best Practices ​

Migrating from ghl-ui Tag to HighRise Tag ​

Component Implementation Changes ​

Import Changes ​

Basic Usage Changes ​

Basic Tag ​

Type/Color Variants ​

With Icon ​

With Group (Migration Path) ​

Props Changes ​

Required Props ​

Modified Props ​

New Props ​

Color Mapping ​

Size Mapping ​

Emits Changes ​

Slots Changes ​

Examples ​

Basic Tag with Different Colors ​

Interactive Tag with Checkbox ​

Closable Tag with Icon ​

Tag with Count and Avatar ​

Breaking Changes ​

Best Practices ​

Migrating from ghl-ui Tag to HighRise Tag

Component Implementation Changes

Import Changes

Basic Usage Changes

Basic Tag

Type/Color Variants

With Icon

Props Changes

Events

Slots

Examples

Basic Tag with Colors

Selectable Tag (Checkbox Mode)

Closable Tag with Icon

Truncated Tag with Count

Best Practices

Migrating from ghl-ui Tag to HighRise Tag

Component Implementation Changes

Import Changes

Basic Usage Changes

Basic Tag

Type/Color Variants

With Icon

With Group (Migration Path)

Props Changes

Required Props

Modified Props

New Props

Color Mapping

Size Mapping

Emits Changes

Slots Changes

Examples

Basic Tag with Different Colors

Interactive Tag with Checkbox

Closable Tag with Icon

Tag with Count and Avatar

Breaking Changes

Best Practices