CngxEmptyState
projects/ui/empty-state/empty-state.component.ts
Import#
import { CngxEmptyState } from '@cngx/ui/empty-state'
Description#
Empty-state display organism for grids, tables, lists, and dashboards.
Communicates why a view is empty and what the user can do next.
Supports three UX contexts via the parent's emptyReason:
- first-use - onboarding, show what's possible
- no-results - recovery, offer filter reset or search change
- cleared - confirmation, everything is done
Icon is provided via the [cngxEmptyStateIcon] content slot - no Material
dependency. Consumers project <mat-icon>, <svg>, or any icon system.
<cngx-empty-state title="No results" description="Try a different search term">
<mat-icon cngxEmptyStateIcon>search_off</mat-icon>
<button cngxEmptyStateAction (click)="resetSearch()">Reset</button>
</cngx-empty-state>Metadata#
Host#
Relationships
Index#
Inputs#
Bind an async state - auto-hides when data is not empty.
HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-labelledby] | titleId |
[attr.aria-describedby] | description() ? descriptionId : null |
[attr.hidden] | shouldHide() || null |
Default visuals for CngxEmptyState. The host carries
.cngx-empty-state and projects into nested __icon-slot,
__default-icon, __title, __description, and __actions
elements. Token groups span Layout, Surface, and Typography.
Slots
.cngx-empty-state__icon-slot- consumer-projected icon; the default glyph next to it is hidden when this slot is non-empty.cngx-empty-state__default-icon- fallback glyph (50% opacity) when no custom icon is projected.cngx-empty-state__title- h1-style header.cngx-empty-state__description- body copy, capped at 40ch.cngx-empty-state__actions- trailing action row
Inheritance
All three text colors delegate to the foundation so a brand swap
cascades through one :root pass - no per-component dark-mode
4-block needed because the foundation already carries the
light/dark distinction:
--cngx-empty-color->--cngx-color-text--cngx-empty-icon-color->--cngx-color-text--cngx-empty-title-color->--cngx-color-text
Pair with
@cngx/themes/material/empty-state-theme- Material 3 surface palette@use '@cngx/ui/empty-state/_empty-state'- opt-in Sass partial for consumers preferring Sass-driven theming
Index#
Layout
*16pxVertical gap between the icon, title, description, and actions.
Falls back to --cngx-space-md.
*48pxBlock padding around the entire empty state. Falls back to
--cngx-space-xl.
Surface
<color>oklch(0.34 0.005 290)Default text color for the description slot.
<color>oklch(0.34 0.005 290)Color of the default icon glyph (when no custom icon is projected).
Typography
<color>oklch(0.18 0.005 290)Text color of the title slot - slightly darker than the description for a clear hierarchy.