Accessibility: Not Needed

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 justify-center w-16 h-16 rounded-full bg-gray-100">
          <Building02Icon class="w-8 h-8 text-gray-600" />
        </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'

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