Data Display · astro-ui · Empty

Empty

Empty-state placeholder with media/title/description/footer slots.

Empty marks the ‘no data’ moment: an icon or illustration slot, a title, a description, and an action footer. Every part is optional — compose what the state needs.

← All components

Features

Slot composition: media, title, description, footer
3 sizes
Centered, token-themed layout

Usage

---
import { Empty, Button } from "astro-ui";
---

<Empty>
  <span slot="media" aria-hidden="true">⌀</span>
  <span slot="title">No results</span>
  <span slot="description">Try adjusting your filters.</span>
  <Button slot="footer" size="sm" variant="outline">Clear filters</Button>
</Empty>

Demos

Basic

No results

Try adjusting your filters.

<Empty>
  <span slot="media" aria-hidden="true">⌀</span>
  <span slot="title">No results</span>
  <span slot="description">Try adjusting your filters.</span>
  <Button slot="footer" size="sm" variant="outline">Clear filters</Button>
</Empty>

API

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Spacing/text scale.
`ariaLabel`	`string`	`—`	Accessible name when context needs one.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.

Slots

Slot	Description
`media`	Icon or illustration above the text.
`title`	State heading.
`description`	Supporting text.
`footer`	Action row (buttons).

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

Changelog

Version history mentioning Empty.

v0.1.0 — 2026-11-11

added

Data display (10): Badge, Avatar, Attachment, Table, Progress, Bubble, Chart, Empty, Tag, Timeline.