bx

Empty

An empty state placeholder with icon, title, description and CTA.

No results found
Try adjusting your search or filter to find what you're looking for.
tsx 
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon"><InboxIcon /></EmptyMedia>
    <EmptyTitle>No results found</EmptyTitle>
    <EmptyDescription>Try adjusting your search or filter to find what you're looking for.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent><Button>Reset filters</Button></EmptyContent>
</Empty>

Empty is the empty state of a list or panel. Header (icon via EmptyMedia + Title + Description) + Content (optional CTA). Use it when a search returns nothing, when a user has not created their first item yet, and so on.

Installation

Terminal 
$ bext ui add empty

Usage

tsx 
import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, Button } from "@bext-stack/ui/primitives"

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon"><InboxIcon /></EmptyMedia>
    <EmptyTitle>No messages</EmptyTitle>
    <EmptyDescription>Send your first message.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent><Button>Start chat</Button></EmptyContent>
</Empty>

Anatomy

<Empty>
  ├── <EmptyHeader>
  │   ├── <EmptyMedia variant="icon"><svg /></EmptyMedia>
  │   ├── <EmptyTitle>No results</EmptyTitle>
  │   └── <EmptyDescription>Try changing your filters.</EmptyDescription>
  └── <EmptyContent><Button>Reset filters</Button></EmptyContent>

API Reference

Empty

Prop Type Default Description
children ReactNode — Typically an EmptyHeader followed by an optional EmptyContent. Rendered in a centered flex column.

EmptyHeader

Prop Type Default Description
children ReactNode — Visual wrapper for the icon + title + description block.

EmptyMedia

Prop Type Default Description
variant "default" | "icon" "default" default: transparent, the child keeps its own size. icon: 40px rounded square with a muted background.
children ReactNode — The icon or illustration.

EmptyTitle

Prop Type Default Description
children ReactNode — Title text. Rendered as a <div> (text-lg font-medium), not as a heading.

EmptyDescription

Prop Type Default Description
children ReactNode — Muted explanatory text. Direct <a> children are underlined.

EmptyContent

Prop Type Default Description
children ReactNode — CTA area (button, link).

Data Attributes

Attributes you can target in custom CSS to override the style for each state.

Attribute On Values Description
data-slot every sub-component "empty" | "empty-header" | "empty-icon" | "empty-title" | "empty-description" | "empty-content" Stable selector for custom styling. EmptyMedia uses "empty-icon" for both variants.
data-variant EmptyMedia "default" | "icon" Reflects the variant prop.

Accessibility

Empty sets no role and EmptyTitle is a <div>, not a heading. When the empty state is the result of a user action (search, filter), put it inside your own wrapper with role="status" so the change is announced. Icons passed to EmptyMedia are decorative: give the <svg> aria-hidden="true".

← Dropdown Menu Form →