RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

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

Provide a title, description, and action button text; the component renders a centered empty state with primary/secondary buttons.

No Project

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

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

Sizes

Use size (lg, md, or sm) to scale the title, description, and action buttons together. lg is the default.

Small

size = sm

Medium

size = md

Large

size = lg

<template>
  <HLEmpty id="empty-sm" title="Small" description="size = sm" size="sm" positive-text="New Project" negative-text="Clear Search" />
  <HLEmpty id="empty-md" title="Medium" description="size = md" size="md" positive-text="New Project" negative-text="Clear Search" />
  <HLEmpty id="empty-lg" title="Large" description="size = lg" size="lg" positive-text="New Project" negative-text="Clear Search" />
</template>

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

With Icon

Set icon to one of the predefined types to show a themed illustration: default, info, success, loader, error, and warning.

default

icon = default

info

icon = info

success

icon = success

loader

icon = loader

error

icon = error

warning

icon = warning

<template>
  <!-- Set `icon` to any of: default, info, success, loader, error, warning -->
  <HLEmpty
    id="empty-with-icon"
    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

Pass your own icon via custom-icon and tune its custom-icon-color / custom-icon-bg-color using HighRise color tokens.

No Project

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

<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"
    :custom-icon="Building01Icon"
    custom-icon-color="var(--pink-600)"
    custom-icon-bg-color="var(--pink-100)"
    @positive-click="handlePositiveClick"
    @negative-click="handleNegativeClick"
  />
</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

Fill the #header slot to replace the default icon area with your own illustration or graphic.

Custom Header

No Project

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

<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"
  >
    <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>
</template>

<script setup lang="ts">
  import { HLEmpty } from '@platform-ui/highrise'
  import { Building02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

With Custom Actions

Fill the #actions slot to replace the built-in buttons entirely. Note: the default @positive-click / @negative-click emits won't fire — handle clicks on your own elements.

No Project

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

Custom Action

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

<script setup lang="ts">
  import { HLEmpty } from '@platform-ui/highrise'
  import { Building02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Using Empty in a DataTable

The most common use of HLEmpty is a table's empty state — rendered inside the #no-data slot of HLDataTable. See DataTable → Empty State for a full example.

Import

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. The rendered root element's id is prefixed, e.g. id="state" renders empty-state. Action button ids are positive-<id> / negative-<id>.
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	Component | (() => VNodeChild)	-	Icon for the primary button. Pass an icon component (e.g. PlusIcon) or a render function (e.g. () => h(PlusIcon)).
icon	'default' | 'info' | 'success' | 'loader' | 'error' | 'warning'	-	Predefined icon type
customIcon	Component | (() => VNodeChild)	-	Custom icon shown when icon is not set. Pass an icon component or a render function (e.g. () => h(FileX03Icon)).
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