EmptyState

Explica por qué no hay contenido y ofrece una siguiente acción útil.

Categoría: Estados y avisos
Import: @neural-ui/core/empty-state
Selector: neu-empty-state

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

Uso

Utiliza title y description para explicar un resultado vacío. actionLabel añade un botón que emite action; la aplicación decide qué hacer. Core incluye el icono inbox predeterminado. Para otra clave de icono, registra un resolver de la aplicación. Usa icon null para ocultarlo. size controla la escala visual y density el espaciado. No tiene zonas de contenido proyectado.

Ejemplos

Prueba la interacción y abre Código para ver la implementación. Reiniciar restablece el estado inicial.

No hay pedidos coincidentes

Limpia los filtros para ver todos tus pedidos.

Prueba y configura

Cambia las opciones y consulta la vista previa y el template generado. Código contiene el ejemplo ejecutable completo.

Vista previa

No hay pedidos coincidentes

Prueba a limpiar los filtros.

Eventos action: 0

Título

Descripción

Texto de la acción

Template generado: refleja las opciones anteriores. Abre Código para ver los imports y el estado completos.

<neu-empty-state
  title="No hay pedidos coincidentes"
  description="Prueba a limpiar los filtros."
  actionLabel="Limpiar filtros"
  size="md"
  tone="neutral"
  density="normal"
  icon="inbox"
  iconSize="3rem"
  (action)="actions.update(addOne)"
/>

Datos y contenido

La aplicación proporciona el contenido y gestiona action. EmptyState no obtiene datos, navega ni cambia filtros automáticamente.

Accesibilidad y teclado

Proporciona un motivo y una acción visibles, como No hay pedidos coincidentes y Limpiar filtros. El icono es decorativo. La acción es un botón nativo compatible con Intro y Espacio. Anuncia el resultado desde la aplicación cuando sea necesario.

Tecla	Acción
`Tab`	Accede a la acción disponible y al contenido interactivo proyectado.
`Enter`	Activa el botón de acción enfocado.
`Space`	Activa el botón de acción enfocado.

API

Los Inputs y Outputs se extraen del paquete fijado. Los tipos con nombre enlazan a sus definiciones; Templates enumera solo las zonas de proyección disponibles.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`actionLabel`	`string`	`''`	`[actionLabel]`	Texto de la acción; vacío oculta el botón.
`density`	`NeuDensity`	`'normal'`	`[density]`	Espaciado compact, normal o relaxed.
`description`	`string`	`''`	`[description]`	Explicación visible opcional.
`icon`	`string \| null`	`'inbox'`	`[icon]`	inbox funciona sin proveedor; otra clave necesita un resolver de aplicación; null lo oculta.
`iconSize`	`string`	`'3rem'`	`[iconSize]`	Tamaño CSS del icono decorativo.
`size`	`NeuEmptyStateSize`	`'md'`	`[size]`	Escala visual sm, md o lg.
`title`	`string`	`'Nothing to see here'`	`[title]`	Motivo visible de la ausencia de contenido.
`tone`	`NeuEmptyStateTone`	`'neutral'`	`[tone]`	Tratamiento semántico del icono.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`action`	`void`	`(action)="onAction($event)"`	Activación del botón; la aplicación controla la acción resultante.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuDensityTypeScript

NeuEmptyStateSizeTypeScript

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

// Declaración pública (solo referencia)
export type NeuEmptyStateSize = 'sm' | 'md' | 'lg';

NeuEmptyStateToneTypeScript

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

// Declaración pública (solo referencia)
export type NeuEmptyStateTone = 'neutral' | 'info' | 'warning' | 'danger' | 'success';

Estilos y tokens

Utiliza los Inputs públicos y los tokens de superficie, texto, espaciado y color semántico de Core. Mantén el contenido adaptable y comprueba ambos temas.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-error`	Color del campo no válido o de la acción de peligro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#dc2626`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-text-muted`	Etiquetas secundarias y contenido de ayuda	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#475569`
`--neu-info`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-radius-lg`	Radio de esquina	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`12px`