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><InboxIcon /></EmptyMedia>
    <EmptyTitle>No messages</EmptyTitle>
    <EmptyDescription>Get started by sending one.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent><Button>New message</Button></EmptyContent>
</Empty>

Empty — état vide d'une liste ou d'un panel. Header (icône via EmptyMedia + Title + Description) + Content (CTA optionnel). Utiliser quand un résultat de recherche ne retourne rien, quand un utilisateur n'a pas encore créé son premier item, etc.

Installation

Terminal 
$ bext ui add empty

Usage

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

<Empty>
  <EmptyHeader>
    <EmptyMedia><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>
</Empty>

API Reference

Empty

Prop Type Default Description
children ReactNode — undefined

EmptyHeader

Prop Type Default Description
children ReactNode — Wrapper visuel du bloc icône + titre + description.

EmptyMedia

Prop Type Default Description
variant "icon" | "image" "icon" icon → bordé, muted. image → thumbnail carré.
children ReactNode — undefined

EmptyTitle

Prop Type Default Description
children ReactNode — undefined

EmptyDescription

Prop Type Default Description
children ReactNode — undefined

EmptyContent

Prop Type Default Description
children ReactNode — Zone CTA (bouton, lien).

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute On Values Description
data-slot="empty-icon" EmptyMedia (variant=icon) — undefined

Accessibility

Wrapper avec role="status" quand l'état vide est le résultat d'une action utilisateur (recherche, filtre). Sinon simple <div> décoratif.

← Dropdown Menu Form →