Empty

Use bo-empty for a collection, search, or view with no current content.

Usage

No projects yetCreate a project to get started.

<bo-empty title="No projects yet" description="Create a project to get started.">
  <template #media><bo-icon icon="folder" size="lg" /></template>
  <template #action><bo-button>Create project</bo-button></template>
</bo-empty>

Custom content

The default slot replaces the generated title and description.

Nothing matches this filter.

Try a broader search.

<bo-empty>
  <template #default>
    <strong>Nothing matches this filter.</strong>
    <p>Try a broader search.</p>
  </template>
  <template #action><bo-button kind="outline">Clear filters</bo-button></template>
</bo-empty>

API

Prop / slot	Type	Default	Description
id / dataTestId	string	autogenerated	Root attributes.
title / description	string	-	Generated title and supporting text.
role / ariaLabel	string	-	Root semantics.
media	slot	-	Icon, image, or other visual.
default	slot	-	Replaces generated text.
action	slot	-	Primary or secondary actions.