Empty

Info:Feedback

A centered placeholder for a no-data state: an icon, a message, and an action.

empty state

no data

placeholder

zero state

blank slate

No results found

Try adjusting your filters or searching for something else.

Inbox zero

You're all caught up. Nothing needs your attention right now.

Empty is the placeholder a surface shows when it has nothing to show: no search results, an empty inbox, a list before its first item. It is a centered column that styles whatever you put in it, so it renders no markup of its own: an icon in .xtyle-empty__media sits muted and enlarged at the top, the first heading reads as the title, a <p> as the muted body, and buttons in .xtyle-empty__actions line up beneath.

Everything draws from the derived register, and because it only frames content it carries no semantics of its own, so the heading and the action keep theirs. Standalone like Stack, it needs no runtime to render.

When to use

How this component composes with the rest of the set.

Drop it into a table body, a search panel, or a card when the data set is empty, so the surface never renders blank.

Pair the Icon that matches the context (a search for no results, an inbox for a clean queue) with a one-line next step.

Give the primary action a solid Button and any secondary a subtle one; both sit in .xtyle-empty__actions.

Anatomy

The named parts that make up the component, with their selectors.

media

.xtyle-empty__media

The optional icon or illustration at the top, enlarged and muted. Wrap it in .xtyle-empty__media (a bare <xtyle-icon> also works).

--text-4xl

--fg-3

title

.xtyle-empty :is(h1,h2,h3,h4,h5,h6)

The headline: the first heading (or .xtyle-empty__title).

--text-lg

--weight-semibold

--fg-0

text

.xtyle-empty p

The supporting line: a <p> (or .xtyle-empty__text), width-capped for readability.

--text-sm

--fg-2

actions

.xtyle-empty__actions

The button row beneath, wrapped in .xtyle-empty__actions.

--space-2

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered

12/12 consumed tokens produced

default register: 299 tokens

Live coverage check against the xtyle-default register (derive(xtyleDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--fg-0

--fg-2

--fg-3

--font-sans

--space-2

--space-3

--space-4

--space-8

--text-4xl

--text-lg

--text-sm

--weight-semibold

Slots

default

html

svelte

astro

The placeholder content: a media element, a heading, a paragraph, and an .xtyle-empty__actions row, in that order.

Code

No results

A search empty state: an icon, a headline, a hint, and a reset action.

<xtyle-empty>
	<div class="xtyle-empty__media"><xtyle-icon name="search"></xtyle-icon></div>
	<h3>No results found</h3>
	<p>Try adjusting your filters or search term.</p>
	<div class="xtyle-empty__actions">
		<xtyle-button variant="subtle">Clear filters</xtyle-button>
	</div>
</xtyle-empty>

<script lang="ts">
	import { Empty, Icon, Button } from "@xtyle/svelte";
</script>

<Empty>
	<div class="xtyle-empty__media"><Icon name="search" /></div>
	<h3>No results found</h3>
	<p>Try adjusting your filters or search term.</p>
	<div class="xtyle-empty__actions">
		<Button variant="subtle">Clear filters</Button>
	</div>
</Empty>

---
import Empty from "@xtyle/astro/Empty.astro";
import Icon from "@xtyle/astro/Icon.astro";
import Button from "@xtyle/astro/Button.astro";
---

<Empty>
	<div class="xtyle-empty__media"><Icon name="search" /></div>
	<h3>No results found</h3>
	<p>Try adjusting your filters or search term.</p>
	<div class="xtyle-empty__actions">
		<Button variant="subtle">Clear filters</Button>
	</div>
</Empty>