Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Empty

This component provides a consistent way to communicate when there is no data to display, guiding users on next steps or actions they can take.

Default

No Project

Your search 'Landing page design' did not match any projects. Please try again.

Vue

<template>
  <HLEmpty
    title="No Project"
    description="Your search 'Landing page design' did not match any projects. Please try again."
    positive-text="New Project"
    negative-text="Clear Search"
    :positive-icon="PlusIcon"
    @positive-click="handlePositiveClick"
    @negative-click="handleNegativeClick"
  >
  </HLEmpty>
</template>

<script setup lang="ts">
  import { HLEmpty } from '@platform-ui/highrise'
  import { PlusIcon } from '@gohighlevel/ghl-icons/24/outline'
  const handlePositiveClick = () => {}
  const handleNegativeClick = () => {}
</script>

With Icon

No Project

Your search 'Landing page design' did not match any projects. Please try again.

Vue

<template>
  <HLEmpty
    title="No Project"
    description="Your search 'Landing page design' did not match any projects. Please try again."
    size="lg"
    positive-text="New Project"
    negative-text="Clear Search"
    icon="warning"
    @positive-click="handlePositiveClick"
    @negative-click="handleNegativeClick"
  />
</template>
<script setup lang="ts">
  import { HLEmpty } from '@platform-ui/highrise'
  const handlePositiveClick = () => {}
  const handleNegativeClick = () => {}
</script>

With Custom Icon

No Project

Your search 'Landing page design' did not match any projects. Please try again.

Vue

<template>
  <HLContentWrap>
    <HLEmpty
      title="No Project"
      description="Your search 'Landing page design' did not match any projects. Please try again."
      size="lg"
      positive-text="New Project"
      negative-text="Clear Search"
      :custom-icon="Building01Icon"
      custom-icon-color="var(--indigo-600)"
      custom-icon-bg-color="var(--indigo-100)"
      @positive-click="handlePositiveClick"
      @negative-click="handleNegativeClick"
    />
  </HLContentWrap>
</template>
<script setup lang="ts">
  import { HLEmpty } from '@platform-ui/highrise'
  import { Building01Icon } from '@gohighlevel/ghl-icons/24/outline'
  const handlePositiveClick = () => {}
  const handleNegativeClick = () => {}
</script>

With Custom Header

Custom Header

No Project

Your search 'Landing page design' did not match any projects. Please try again.

Vue

<template>
  <HLContentWrap>
    <HLEmpty
      title="No Project"
      description="Your search 'Landing page design' did not match any projects. Please try again."
      size="lg"
      positive-text="New Project"
      negative-text="Clear Search"
    >
      <template #header>
        <div class="flex items-center gap-2">
          <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100">
            <Building02Icon class="w-4 h-4 text-gray-600" />
          </div>
          <p class="text-xl font-medium">Custom Header</p>
        </div>
      </template>
    </HLEmpty>
  </HLContentWrap>
</template>
<script setup lang="ts">
  import { HLEmpty } from '@platform-ui/highrise'
  import { Building02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

With Custom Actions

No Project

Your search 'Landing page design' did not match any projects. Please try again.

Custom Action

Vue

<template>
  <HLContentWrap>
    <HLEmpty title="No Project" description="Your search 'Landing page design' did not match any projects. Please try again." size="lg">
      <template #actions>
        <div class="flex items-center gap-2 border-2 border-gray-300 border-solid rounded-xl px-4 cursor-pointer hover:bg-gray-200">
          <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100">
            <Building02Icon class="w-4 h-4 text-gray-600" />
          </div>
          <p class="text-xl font-medium">Custom Action</p>
        </div>
      </template>
    </HLEmpty>
  </HLContentWrap>
</template>
<script setup lang="ts">
  import { HLEmpty } from '@platform-ui/highrise'
  import { Building02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Import

Vue

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

Accessibility

• Wrap the empty state in role="status" or apply aria-live="polite" so the message is announced when it appears.
• Reference follow-up actions (buttons, links) via aria-describedby so the empty-state context reads with the control.

Props

Prop	Type	Default	Description
id *	string	-	Unique identifier for the empty state
title	string	-	Title text for the empty state
description	string	-	Description text explaining the empty state
size	'lg' | 'md' | 'sm'	'lg'	Size of the empty state component
positiveText	string	-	Text for the primary action button
negativeText	string	-	Text for the secondary action button
positiveIcon	() => VNodeChild	-	Icon component for the positive button
icon	'default' | 'info' | 'success' | 'loader' | 'error' | 'warning'	-	Predefined icon type
customIcon	() => VNodeChild	-	Custom icon component
customIconColor	string	-	Color for custom icon. Uses HighRise color system.
customIconBgColor	string	-	Background color for custom icon. Uses HighRise color system.

Emits

Event	Parameters	Description
@positiveClick	-	Emitted when positive action button is clicked
@negativeClick	-	Emitted when negative action button is clicked

Slots

Name	Description
header	Custom header content, typically used for illustrations or custom graphics
actions	Customize action buttons; emits have to be handled by the components placed in the actions slot and the default emits will not work