CSS only

Empty

An empty-state block for when there is nothing to show. SCSS-only: a centered ng-empty with a title, text and optional action.

Drop an icon, a ng-empty-title and a ng-empty-text inside ng-empty; add a button to guide the next step. Size the icon with a font-size helper.

Basic

No results found

Try adjusting your search or filters.

empty.html

<div class="ng-empty">
    <i class="ph ph-magnifying-glass fs-5xl text-mute lh-tight"></i>
    <div class="ng-empty-title">No results found</div>
    <div class="ng-empty-text">Try adjusting your search or filters.</div>
    <button type="button" class="ng-btn ng-btn-primary">Reset filters</button>
</div>

Anatomy

ng-empty ng-empty-title ng-empty-text

Reference

Generated from the component source (_ng_empty.scss).

Component info

Name	`Empty`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_empty.scss`

Classes

.ng-empty .ng-empty-text .ng-empty-title

Tokens

--ng-empty-gap