Non-ideal state
@xui/non-ideal-stateThe placeholder shown when there is nothing to show: an empty list, a failed search, an error.
Install
pnpm add @xui/non-ideal-state Add the barrel to a standalone component's imports:
import { XuiNonIdealStateImports } from '@xui/non-ideal-state';
@Component({
imports: [XuiNonIdealStateImports],
// …
})Examples
Default
Loading preview…
<xui-non-ideal-state class="border-border rounded-lg border" [title]="title" [description]="description" [orientation]="orientation">
<ng-icon visual xui size="xl" name="matSearchOffRound" />
<button action xuiButton size="sm" variant="outline">Clear filters</button>
</xui-non-ideal-state>Horizontal
Loading preview…
<xui-non-ideal-state class="border-border rounded-lg border" [title]="title" [description]="description" [orientation]="orientation">
<ng-icon visual xui size="xl" name="matSearchOffRound" />
<button action xuiButton size="sm" variant="outline">Clear filters</button>
</xui-non-ideal-state>Text only
Loading preview…
<xui-non-ideal-state class="border-border rounded-lg border" [title]="title" [description]="description" />API
The placeholder shown when there is nothing to show: an empty list, a failed search, an error.
Variants
orientationverticalInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''orientationXuiNonIdealStateVariants['orientation']Stack the icon above the text and centre everything (vertical), or set the icon beside it (horizontal).this.config.orientationtitlestring | nullWhat happened, in a few words — "No results", "Nothing here yet".nulldescriptionstring | nullWhat the user can do about it. Project buttons as content for the action itself.null