RTL Support: Full

Accessibility: Full

Translations: Not Needed

Try in Cursor

Tag

Atomic tag element

Default

A basic tag rendered with a color and size.

Your text here

vue

<template>
  <HLTag id="example-tag" size="sm" color="gray">Your text here</HLTag>
</template>

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

All Sizes

Use size to set the tag dimensions; supported values are lg, md, sm, and xs.

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

xssmmdlg

vue

<template>
  <HLTag id="size-xs-tag" closable size="xs" :count="55555">
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

vue

<template>
  <HLTag id="size-sm-tag" closable size="sm" :count="55555">
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

vue

<template>
  <HLTag id="size-md-tag" closable size="md" :count="55555">
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

vue

<template>
  <HLTag id="size-lg-tag" closable size="lg" :count="55555">
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

With Checkbox

Add checkbox and bind v-model:checked to toggle a selectable checkbox inside the tag. Each time it's toggled the tag emits @checked with the new boolean state, so you can react to selection changes (for example, to filter a list).

Label

55.55K

vue

<template>
  <HLTag id="checkbox-tag" v-model:checked="isChecked" checkbox size="sm" :count="55555" @checked="onChecked"> Label </HLTag>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { HLTag } from '@platform-ui/highrise'

  const isChecked = ref(false)
  // Fired on every toggle with the new checked state
  const onChecked = (checked: boolean) => {
    console.log('checked:', checked)
  }
</script>

Closable

Event @close will be triggered when the close icon is clicked.

Label 1

55.55K

disabled

55.55K

vue

<template>
  <HLTag v-if="showTag1" id="closable-tag" closable size="sm" :count="55555" @close="onCloseTag"> Label 1 </HLTag>
  <HLTag id="closable-tag1" closable size="sm" :count="55555" disabled> disabled </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const showTag1 = ref(true)
  const onCloseTag = () => {
    showTag1.value = false
  }
</script>

Closable with leading icon

Combine closable with the icon slot to show a leading icon alongside the close button.

Label

55.55K

vue

<template>
  <HLTag id="close-icon-tag" closable size="sm" :count="55555">
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Disabled

Set disabled to make the tag non-interactive — it's dimmed and stops responding to clicks, so the @checked and @close events won't fire. Use it for tags that are shown for context but can't currently be acted on.

Label

Closable

Checkbox

vue

<template>
  <HLTag id="disabled-plain" size="sm" disabled>Label</HLTag>
  <HLTag id="disabled-closable" size="sm" closable disabled>Closable</HLTag>
  <HLTag id="disabled-checkbox" size="sm" checkbox disabled>Checkbox</HLTag>
</template>

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

Rounded

Add round to render the tag with fully rounded corners; it also works with :bordered="false".

Label

55.55K

Label

55.55K

vue

<template>
  <HLTag id="rounded-tag" closable size="sm" :count="55555" round>
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

With Avatar

Use the avatar slot to render an HLAvatar inside the tag.

Avatar

vue

<template>
  <HLTag id="avatar-tag" size="md" round>
    <template #avatar>
      <HLAvatar id="example-avatar-image" size="2xs" src="https://picsum.photos/200" />
    </template>
    Avatar
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag, HLAvatar } from '@platform-ui/highrise'
</script>

With Avatar Group

Use the avatar slot with HLAvatarGroup to render multiple stacked avatars inside the tag.

Avatar Group

vue

<template>
  <HLTag id="avatar-group-tag" size="md" round>
    <template #avatar>
      <HLAvatarGroup :options="options" stacked tooltip size="2xs" />
    </template>
    Avatar Group
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag, HLAvatarGroup } from '@platform-ui/highrise'

  const options = [
    {
      name: 'Zenin Maki',
      src: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Maki',
      objectFit: 'cover',
    },
    {
      name: 'Zoro',
      src: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Zoro',
      objectFit: 'cover',
    },
    {
      name: 'Nami',
      src: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Nami',
      objectFit: 'cover',
    },
  ]
</script>

Set dropdown to 'open' or 'close' to display a dropdown chevron icon in the corresponding state.

openclose

vue

<template>
  <HLTag id="dropdown-tag" size="sm" dropdown="open" round>
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

vue

<template>
  <HLTag id="dropdown-tag" size="sm" dropdown="close" round>
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Non-interactive

Set :interactive="false" to render a static tag with no hover or click affordance.

Non-interactive Tag

Non-interactive Round

With Icon

Round with Icon

vue

<template>
  <!-- Basic non-interactive -->
  <HLTag id="non-interactive-tag" size="sm" :interactive="false"> Non-interactive Tag </HLTag>

  <!-- Round non-interactive -->
  <HLTag id="non-interactive-round-tag" size="sm" :interactive="false" round> Non-interactive Round </HLTag>

  <!-- Non-interactive with icon -->
  <HLTag id="non-interactive-icon-tag" size="sm" :interactive="false">
    <template #icon>
      <Lightning01Icon />
    </template>
    With Icon
  </HLTag>

  <!-- Round non-interactive with icon -->
  <HLTag id="non-interactive-round-icon-tag" size="sm" :interactive="false" round>
    <template #icon>
      <Lightning01Icon />
    </template>
    Round with Icon
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Text Truncation

Tags can automatically truncate long text content with ellipsis. Hover over truncated text to see the full content in a tooltip.

This is a very long tag text that will be truncated with ellipsis at the default width

Custom width truncation example

Long text with icon that gets truncated

Default WidthCustom WidthWith Icon

vue

<template>
  <HLTag id="truncated-default-tag" truncate>
    This is a very long tag text that will be truncated with ellipsis at the default width
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
</script>

vue

<template>
  <HLTag id="truncated-custom-tag" truncate :max-width="80"> Custom width truncation example </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
</script>

vue

<template>
  <HLTag id="truncated-with-icon-tag" truncate>
    <template #icon>
      <Lightning01Icon />
    </template>
    Long text with icon that gets truncated
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Colors - Borderless

Set color with :bordered="false" to render the tag in a filled, borderless style.

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

vue

<template>
  <HLTag
    id="borderless-rose-tag"
    :bordered="false"
    @checked="onChecked"
    v-model:checked="isChecked"
    color="rose"
    closable
    checkbox
    size="lg"
    :count="55555"
  >
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'
  const isChecked = ref(false)
  const onChecked = val => {
    isChecked.value = val
  }
</script>

Colors - Bordered

Set color to apply one of the predefined themes; tags render with a border by default.

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

vue

<template>
  <HLTag id="example-tag" @checked="onChecked" v-model:checked="isChecked" color="rose" closable checkbox size="lg" :count="55555">
    <template #icon>
      <Lightning01Icon />
    </template>
    Label
  </HLTag>
</template>
<script setup lang="ts">
  import { HLTag } from '@platform-ui/highrise'
  import { Lightning01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'
  const isChecked = ref(false)
  const onChecked = val => {
    isChecked.value = val
  }
</script>

Event Testing

This example shows handling of the @close and @checked events. Click on the tag or its close button to see the events being logged.

Interactive Tag

Event Log:

No events logged yet. Try clicking the tag or close button above.

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <div>
      <HLTag v-if="showTag" id="event-test-tag" closable checkbox v-model:checked="isChecked" @close="handleClose" @checked="handleChecked">
        Interactive Tag
      </HLTag>
      <HLTag v-if="!showTag" id="reset-tag" color="blue" @click="resetTag"> Reset Tag </HLTag>
    </div>
    <div class="text-sm">
      <p class="font-bold mb-2">Event Log:</p>
      <div v-if="eventLog.length === 0" class="text-gray-500">No events logged yet. Try clicking the tag or close button above.</div>
      <div v-for="(log, index) in eventLog" :key="index" class="text-gray-700">
        {{ log.timestamp }}: {{ log.event }} - {{ log.details }}
      </div>
    </div>
  </div>
</template>

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

const eventLog = ref([])
const isChecked = ref(false)
const showTag = ref(true)

const handleClose = ({ id }) => {
  eventLog.value.unshift({
    event: 'Tag closed',
    details: `ID: ${id}`,
    timestamp: new Date().toLocaleTimeString(),
  })
  showTag.value = false
  // Keep only last 5 events
  if (eventLog.value.length > 5) {
    eventLog.value.pop()
  }
}

const handleChecked = checked => {
  isChecked.value = checked
  eventLog.value.unshift({
    event: 'Tag checked',
    details: `Checked: ${checked}`,
    timestamp: new Date().toLocaleTimeString(),
  })
  // Keep only last 5 events
  if (eventLog.value.length > 5) {
    eventLog.value.pop()
  }
}

const resetTag = () => {
  showTag.value = true
  isChecked.value = false
  eventLog.value.unshift({
    event: 'Tag reset',
    details: 'Tag restored to initial state',
    timestamp: new Date().toLocaleTimeString(),
  })
  // Keep only last 5 events
  if (eventLog.value.length > 5) {
    eventLog.value.pop()
  }
}
</script>

Imports

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

Props

Prop	Type	Default	Description
id *	`string \| undefined`	`undefined`	Unique identifier for the tag
size	`'lg' \| 'md' \| 'sm' \| 'xs'`	`'sm'`	Size of the tag. Must be one of the predefined tag sizes
color	`'gray' \| 'primary' \| 'success' \| 'error' \| 'warning' \| 'gray-blue' \| 'blue-light' \| 'blue' \| 'indigo' \| 'purple' \| 'pink' \| 'rose' \| 'orange-dark'`	`'gray'`	Color theme of the tag. Must be one of the predefined tag colors
bordered	`boolean`	`true`	Whether the tag has a border
checkbox	`boolean`	`undefined`	Whether to show a checkbox within the tag
checked	`boolean`	`undefined`	Controls the checked state when using checkbox mode
closable	`boolean`	`undefined`	Whether the tag can be closed/removed
disabled	`boolean`	`undefined`	Whether the tag is disabled
round	`boolean`	`undefined`	Whether the tag has rounded corners
count	`number`	`undefined`	Number to display within the tag. Only non-negative values are supported.
dropdown	`'open' \| 'close' \| false`	`false`	Controls dropdown state. Use 'open' or 'close' to show/hide dropdown icon
interactive	`boolean`	`true`	Whether the tag is clickable. Tags that are closable or have a dropdown or checkbox are always interactive
truncate	`boolean`	`false`	Whether to truncate long text content with ellipsis and show tooltip on hover
maxWidth	`string \| number`	`136`	Maximum width for truncated text. Numbers are treated as pixels, strings can use any CSS unit

Emits

Name	Type	Description
`@close`	`(payload: { event?: Event; id?: string }): void`	Emitted when close icon is clicked, returns tag id and event
`@checked`	`(val: boolean): void`	Emitted when tag is clicked, returns checked state

Slots

Name	Parameters	Description
default	`()`	The default content slot
icon	`()`	The icon slot inside tag
avatar	`()`	To have `avatar` or `avatar group` inside the tag

Tag ​

Default ​

All Sizes ​

With Checkbox ​

Closable ​

Closable with leading icon ​

Disabled ​

Rounded ​

With Avatar ​

With Avatar Group ​

Dropdown Type ​

Non-interactive ​

Text Truncation ​

Colors - Borderless ​

Colors - Bordered ​

Event Testing ​

Imports ​

Props ​

Emits ​

Slots ​

Tag

Default

All Sizes

With Checkbox

Closable

Closable with leading icon

Disabled

Rounded

With Avatar

With Avatar Group

Dropdown Type

Non-interactive

Text Truncation

Colors - Borderless

Colors - Bordered

Event Testing

Imports

Props

Emits

Slots