Empty

Placeholder hints for empty states.

Basic usage

Losum ipsum dolor

---

<template>
  <b-empty description="Losum ipsum dolor" />
</template>

Custom Image

Use image prop to set image URL.

No Data

---

<template>
  <b-empty
    image="https://cdni.iconscout.com/illustration/free/thumb/page-not-found-4085802-3385471.png"
  />
</template>

Image Size

Use image-size prop to control image size.

No Data

---

<template>
  <b-empty :image-size="360" />
</template>

Bottom Content

Use the default slot to insert content at the bottom.

The list is empty

Create a new item by click the button below

---

<template>
  <b-empty>
    <template #description>
      <h4>The list is empty</h4>
      <p class="text-md c-neutral-7 mt-2">
        Create a new item by click the button below
      </p>
    </template>
    <b-button primary>Add New</b-button>
  </b-empty>
</template>

Empty Attributes

Attribute	Description	Type	Acceptable Value	Default
image	image URL	string	—	—
image-size	image size (width)	number	—	—
description	description	string	—	—

Empty Slots

Name	Description
default	Custom bottom content
image	Custom image
description	Custom description