Empty

Placeholder for empty data. The container has role="status", so screen readers announce the empty state automatically.

Basic Usage

Basic Usage

No data

<script setup lang="ts">
</script>

<template>
  <LhEmpty />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty />
</template>

Custom Description

Custom Description

No search results

<script setup lang="ts">
</script>

<template>
  <LhEmpty description="No search results" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="No search results" />
</template>

Custom Image

Custom Image

No orders yet

<script setup lang="ts">
</script>

<template>
  <LhEmpty image="/logo.svg" description="No orders yet" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty image="/logo.svg" description="No orders yet" />
</template>

With Actions

With Actions

Nothing collected yet

<script setup lang="ts">
</script>

<template>
  <LhEmpty description="Nothing collected yet">
    <template #actions>
      <LhButton type="primary" size="small">Browse</LhButton>
      <LhButton size="small">Refresh</LhButton>
    </template>
  </LhEmpty>
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="Nothing collected yet">
    <template #actions>
      <LhButton type="primary" size="small">Browse</LhButton>
      <LhButton size="small">Refresh</LhButton>
    </template>
  </LhEmpty>
</template>

API

Props

Prop	Description	Type	Default
description	Description text (falls back to the empty.description locale message when unset)	string	—
image	Custom image URL (replaces the default inline illustration)	string	—
sx	sx quick-layout properties	LhSxProps	—

Slots

Slot	Description	Default
default	Custom visual area (replaces the illustration)	Default ink-wash illustration
description	Custom description	Locale message empty.description
actions	Action area	—

Accessibility

• Container has role="status" — announced automatically when it appears
• Decorative images use alt="" and are hidden from screen readers; semantics are carried by the description text

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/empty/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhEmptyProps

export interface LhEmptyProps {
  description?: string
  image?: string
  sx?: LhSxProps
}