Empty State

Default

Use .empty-state when content is absent. Choose a contextual heading. It is not a live region; announce dynamic outcomes separately when needed.

No matching records

Try another search term or clear the active filters.

Clear filtersSave search

<section
	class="empty-state"
	aria-labelledby="empty-search-title"
	aria-describedby="empty-search-description">
	<span class="empty-state-icon" aria-hidden="true">
		<!-- Decorative search icon -->
	</span>
	<h3 class="empty-state-title" id="empty-search-title">No matching records</h3>
	<p class="empty-state-description" id="empty-search-description">
		Try another search term or clear the active filters.
	</p>
	<div class="empty-state-actions">
		<a class="btn btn-solid btn-primary" href="/records">Clear filters</a>
		<button class="btn btn-outline btn-secondary" type="button">Save search</button>
	</div>
</section>

Compact

Use .empty-state-compact in small regions.

No saved views

Save a filter combination to return to it later.

Create view

<section class="empty-state empty-state-compact" aria-labelledby="empty-views-title">
	<h3 class="empty-state-title" id="empty-views-title">No saved views</h3>
	<p class="empty-state-description">Save a filter combination to return to it later.</p>
	<div class="empty-state-actions">
		<button class="btn btn-solid btn-primary btn-sm" type="button">Create view</button>
	</div>
</section>

CSS Variables

Override these variables on the component or an ancestor.

--empty-state-max-width: 36rem;
--empty-state-min-height: 0;
--empty-state-padding-y: var(--spacer-5);
--empty-state-padding-x: var(--spacer-3);
--empty-state-gap: var(--spacer-3);
--empty-state-icon-size: 3rem;
--empty-state-icon-color: var(--text-muted);
--empty-state-title-color: var(--text-color);
--empty-state-description-color: var(--text-muted);
--empty-state-actions-gap: var(--spacer-2);