EmptyState

Explain why content is empty and offer a useful next action.

Category: Feedback and status
Import: @neural-ui/core/empty-state
Selector: neu-empty-state

import { NeuEmptyStateComponent } from '@neural-ui/core/empty-state';

Usage

Use title and description to explain an empty result. actionLabel adds a button that emits action; the application decides what to do. The default inbox icon is included by Core. For another icon key, register an application icon resolver. Set icon to null to omit it. size controls visual scale and density controls spacing. There are no projection slots.

Examples

Try the interaction and open Code for the implementation. Reset restores the initial state.

No matching orders

Clear the filters to see all your orders.

Try and configure

Change the options and inspect the preview and generated template. Code contains the full executable source.

Live preview

No matching orders

Try clearing your filters.

action events: 0

Title

Description

Action label

Generated template: reflects the options above. Open Code for the complete imports and state.

<neu-empty-state
  title="No matching orders"
  description="Try clearing your filters."
  actionLabel="Clear filters"
  size="md"
  tone="neutral"
  density="normal"
  icon="inbox"
  iconSize="3rem"
  (action)="actions.update(addOne)"
/>

Data and content

The application supplies content and handles action. EmptyState does not fetch data, navigate or change filters automatically.

Accessibility and keyboard

Provide a clear visible reason and action, such as No matching orders and Clear filters. The icon is decorative. The action is a native button with Enter and Space support. Announce the result of that action in the surrounding application when necessary.

Key	Action
`Tab`	Reach the available action and projected interactive content.
`Enter`	Activate the focused action button.
`Space`	Activate the focused action button.

API

Inputs and Outputs are extracted from the pinned package. Named types link to their definitions; Templates list only supported projection areas.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`actionLabel`	`string`	`''`	`[actionLabel]`	Visible action text; empty hides the button.
`density`	`NeuDensity`	`'normal'`	`[density]`	compact, normal or relaxed spacing.
`description`	`string`	`''`	`[description]`	Optional visible explanation.
`icon`	`string \| null`	`'inbox'`	`[icon]`	inbox works without a provider; another key needs an application resolver; null hides it.
`iconSize`	`string`	`'3rem'`	`[iconSize]`	CSS size of the decorative icon.
`size`	`NeuEmptyStateSize`	`'md'`	`[size]`	sm, md or lg visual scale.
`title`	`string`	`'Nothing to see here'`	`[title]`	Visible reason for empty content.
`tone`	`NeuEmptyStateTone`	`'neutral'`	`[tone]`	Semantic icon treatment.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`action`	`void`	`(action)="onAction($event)"`	Button activation; application owns the resulting action.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuDensityTypeScript

NeuEmptyStateSizeTypeScript

NeuEmptyStateToneTypeScript

import type { NeuEmptyStateTone } from '@neural-ui/core/empty-state';

// Public declaration (reference only)
export type NeuEmptyStateTone = 'neutral' | 'info' | 'warning' | 'danger' | 'success';

Styles and tokens

Use the public component Inputs and Core surface, text, spacing and semantic color tokens. Keep content responsive and verify both themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-radius`	Control corner radius	Shared by other Core consumers; scope the override.	`8px`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-info`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-radius-lg`	Corner radius	Shared by other Core consumers; scope the override.	`12px`