Accessibility: Work in progress

Translations: Not Needed

Tag

Atomic tag element

Default

Your text here

Vue

html

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

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

All Sizes

Label

55.55K

Label

55.55K

Label

55.55K

Label

55.55K

xssmmdlg

html

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

html

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

html

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

html

<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

Label

55.55K

Vue

html

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

Closable

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

Label 1

55.55K

disabled

55.55K

Vue

html

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

With Close Icon

Label

55.55K

Vue

html

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

Rounded

Label

55.55K

Label

55.55K

Vue

html

<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

Avatar

Vue

html

<HLTag id="avatar-tag" size="md" round>
  <template #avatar>
    <HLAvatar id="example-avatar-image" size="2xs" src="https://picsum.photos/200" />
  </template>
  Avatar
</HLTag>

With Avatar Group

Avatar Group

Vueoptions

html

<HLTag id="avatar-group-tag" size="md" round>
  <template #avatar>
    <HLAvatarGroup :options="options" stacked tooltip size="2xs" />
  </template>
  Avatar Group
</HLTag>

const options = [
  {
    name: 'Zenin Maki',
    src: 'https://i.pinimg.com/736x/76/99/81/769981e8c3ad0e4dc0ba029d831aef34.jpg',
    objectFit: 'cover',
  },
  {
    name: 'Zoro',
    src: 'https://www.dexerto.com/cdn-image/wp-content/uploads/2023/04/20/one-piece-zoro-in-wano-arc.jpeg?width=1200&quality=60&format=auto',
    objectFit: 'cover',
  },
  // ... more options
]

openclose

html

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

html

<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

Non-interactive Tag

Non-interactive Round

With Icon

Round with Icon

html

<!-- 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>

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

html

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

html

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

html

<template>
  <HLTag id="truncated-with-icon" 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

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

html

<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

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

html

<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'
  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

<script setup>
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>

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

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 positive values are supported.
avatarProps	`HLAvatarProps`	`undefined`	Props to pass to the avatar component when using avatar slot
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 ​

With Close Icon ​

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

With Close Icon

Rounded

With Avatar

With Avatar Group

Dropdown Type

Non-interactive

Text Truncation

Colors - Borderless

Colors - Bordered

Event Testing

Imports

Props

Emits

Slots