Empty

Placeholder for empty data states.

Basic Usage

暂无数据

<template>
  <bp-empty />
</template>

Custom Text

Set custom copy with the content prop.

暂无数据

No search results

<template>
  <bp-space type="vertical" :size="24">
    <bp-empty />
    <bp-empty content="No search results" />
  </bp-space>
</template>

Custom Image

Replace the illustration with the image slot.

暂无数据

No favorites

<template>
  <bp-space :size="40">
    <bp-empty>
      <template #image>
        <IconSearchLine size="36" style="color: #c9cdd4" />
      </template>
    </bp-empty>
    <bp-empty content="No favorites">
      <template #image>
        <IconHeartLine size="36" style="color: #c9cdd4" />
      </template>
    </bp-empty>
  </bp-space>
</template>

<script setup lang="ts">
import { IconSearchLine, IconHeartLine } from "birdpaper-icon";
</script>

Empty Props

content

Empty-state text

String

No data

-

Empty Slots

image

Custom empty icon or image

-

-