Empty State
A friendly placeholder for empty lists, no search results, or first-run screens, with room for an icon and actions.
No results found
Try adjusting your filters or search terms.
API
All inputs and configuration options for zyra-empty-state.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | '' | Primary heading text |
description | string | '' | Supporting explanation text |
size | 'sm' | 'md' | 'lg' | 'md' | Overall padding and spacing scale |
Tokens
CSS custom properties zyra-empty-state reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Icon--zyra-color-foreground-subtle | var(--zyra-color-text-dim) | Color of the icon slot content. |
Title--zyra-color-foreground | var(--zyra-color-text) | Color of the title text. |
Description--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Color of the supporting description text. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Presentational — pair with an aria-live region if it appears after an async search
- Action buttons inside the actions slot remain fully keyboard accessible